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点击传送