uniapp项目适配uview

手头有个旧的uniapp项目,uni_modules里有uview的下载包,但是无法使用uview,应该是缺失了配置。按照下载方式配置uview 这里提到下载方式安装uview的一些配置。按照官方的这个指引,项目必须支持scss编译,然后用hbuilder方式安装sass-loader又提示各种问题,后面索性还是用npm来安装依赖,其中碰到很多版本兼容问题,还有和uni-simple-router的兼容问题,这里一并记录下。

整理版本兼容

node-sass和node的版本兼容关系看这里 github node-sass

sass-loader和node-sass的版本兼容关系看这里 github sass-loader

我用的版本是

复制代码
node-sass ^4.14.0
sass-loader ^7.3.1
node 14.18.2

另外原本uni-simple-router的版本太旧了,到处和别人起冲突,弃用之,仍然用npm重新安装。

复制代码
uni-simple-router 2.0.7

另外,如果是用nvm管理node版本,可以直接在node release官网下载对应的版本放到nvm的文件夹下,可直接实现nvm的版本管理。例如我nvm的安装目录是xxx/nvm/,我可以直接下载node-v14.21.3-win-x86.zip解压出v14.18.2这个文件夹后,放在xxx/nvm下即可。

安装依赖

node-sass和sass-loader放在devDependencies依赖下,uni-simple-router放在dependencies依赖下,切换到node14.18.2,执行npm install 或者yarn安装依赖。 安装完成之后执行npm run serve跑项目,这个过程中node-sass又报错了,重新安装一下node-sass即可

复制代码
npm rebuild node-sass

修改配置

vue.config.js:css配置additionalData改为prependData(如果没报错不用改这里,和webpack版本有关)

babel.config.js:新增

javascript 复制代码
    plugins.push([
      new webpack.DefinePlugin({
      ROUTES: webpack.DefinePlugin.runtimeValue(() => {
        const tfPages = new TransformPages({
          includes: ['path', 'name', 'aliasPath']
        });
        return JSON.stringify(tfPages.routes)
      }, true )
    })

main.js:修改uni-simple-router的引用,把原本从plugin引入的注释掉,改为直接从node_modules引入

javascript 复制代码
import { RouterMount } from 'uni-simple-router'
...
RouterMount(app,router,'#app');

common/router/index.js: 继续修改路由的使用

php 复制代码
// import Router from '@/plugin/uni-simple-router/index.js'
import {createRouter} from 'uni-simple-router'

// Vue.use(Router)
// const router = new Router({
// 	encodeURI:true,  
//     routes: [...modules]//路由表
// });

const router = createRouter({
	platform: process.env.VUE_APP_PLATFORM,  
	routes: [...modules]
});

至此node-sass和uni-simpler-router安装完毕,项目可以正常跑起来了。 然后安装之前下载方式配置uview的方法配置一下即可使用uview。

其他

如果需要解决离线环境下icon无法显示的问题,找到u-icon.vue文件,看到这里的字体需要在线阿里的iconfont实现的

css 复制代码
@font-face {
    font-family: 'uicon-iconfont';
    src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
    }          

直接把这个ttf文件下载下来转成base64引入即可

css 复制代码
@font-face {
    font-family: 'uicon-iconfont';
    src: url('data:application/x-font-woff2;charset=utf-8;base64,转成的base64') format('truetype');
    } 

在线的ttf转base64点击传送

相关推荐
一涯3 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调10 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined212 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
WaiterL1 小时前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason1 小时前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕7781 小时前
React19 新增Hooks:useOptimistic
前端·javascript·react.js