前言:因为项目要实现H5端自动化部署,但是使用HBuilder 创建的项目又没有打包命令,因此要对整个项目进行升级
1.使用命令行创建uniapp项目,此命令有点慢,并有可能超时,耐心等待,超时多试几次即可,
此命令需要vue-cli 3.0以上的版本才能执行下载
vue create -p dcloudio/uni-preset-vue my-project
顺便记录下对应的版本号
npm install -g @vue/cli (安装的是最新版)
npm install vue-cli@2.9.6 (指定版本安装【指定版本为3.0以下版本】,其中2.9.6为版本号)
npm install -g @vue/cli@3.11.0(指定版本安装【指定版本为3.0以上版本】,其中3.11.0为版本号)
通过命令行查询可用的包的版本号:
npm view vue-cli versions --json (3.0以下版本)
npm view @vue/cli versions --json (3.0以上版本)
注意:
Vue CLI 4.5以下,对应的是Vue2
Vue CLI 4.5及以上,对应的是Vue3
2.选择默认的模板就好
3.下载完成之后,打开项目查看package.json文件,所有对应的命令都已经有了
4.接下来执行npm run serve 命令 踩坑的开始 直接报错
原因是node版本过低,因为之前兼容老项目 用的是12.19.0的node版本 所以对node 进行升级,
使用14.19.0版本,这里可以使用nvm来管理node版本
5.然后再执行npm run serve 命令,果然没有一帆风顺 继续报错
Error: PostCSS plugin postcss-discard-comments requires PostCSS 8Migration guide for end-users :https://github,com/postcss/postcss/wiki/PostCsS-8-for-end-usersError: PostCSS plugin postcss-discard-comments requires PostCSS8
原因autoprefixer版本过高了 安装指定版本npm i postcss-loader autoprefixer@8.0.0
6.然后安装对应的node-sass版本 ,注意跟node对应上,不然会报错
npm install sass@4.14.1 --save-dev
npm install sass-loader@7.0.0 --save-dev
7.接下来就可以正常使用命令行来运行了,接下来就是项目的移植和升级
将src下面的文件全部清空 -- 用命令行初始化的项目
8.来到老项目 复制选中的文件夹到新项目的src目录下面
9.老项目里的vue.config.js要拿出来 放到根目录下面来,老项目安装的一下依赖 需要在新项目重新安装,复制老项目下的package.json的依赖到新项目下 的package.json里,然后重新执行npm install
10.此时 再用npm run serve 命令运行项目,不出意外的话就要出意外了
Can't resolve 'crypto' in 'G:\uniaproject uniapp cli模版 uniappcli2 srccommonlutilsModule not
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
11.这是因为Webpack 版本 5 开始,默认不再包含针对 Node.js 核心模块的 polyfill(兼容性处理),执行命令
npm install crypto-browserify
12.package.json里面加入如下代码 注意是跟devDependencies字段平级的
"browser": {
"crypto": false
},
13.再运行,终于不报错了,但是 ,项目中使用的 uni-simple-router和uni-read-pages来封装的路由器拦截失效了 纠其原因, uni-simple-router在vue-cli版本中 需要添加额外的配置项。这个bug是真坑~ 小小吐槽一下
完整的vue.config.js文件
const TransformPages = require('uni-read-pages')
const tfPages = new TransformPages({
cli:true, //当前是否为脚手架初始化的项目
includes:['path','meta','auth','name']
})
module.exports = {
configureWebpack: {
plugins: [
new tfPages.webpack.DefinePlugin({
ROUTES: JSON.stringify(tfPages.routes)
})
]
},
transpileDependencies:['uni-simple-router']//vue-cli项目必加此配置 否则路由拦截无效
}
至此,所有的坑踩完了~ 项目终于可以使用命令行运行和打包了