uniapp 从可视化项目 向 cli 迁移

前言

为满足自动化部署对 uniapp 进行迁移

本地环境

node -v     # 14.20.0
npm -v      # 6.14.17
vue -V      # vue-cli 5.0.8

一、安装并且搭建cli项目

安装 vue/cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

如需升级

npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli

uniapp 官网推荐使用 @vue/cli@4 及以上版本

二、搭建 uniapp

vue create -p dcloudio/uni-preset-vue my-project

可以根据提示创建模板，推荐使用默认模板

三、代码迁移

• 将 HBuilderX 工程内的文件（除 unpackage、node_modules 目录）拷贝至 vue-cli 工程内 src 目录
• 在 vue-cli 工程内重新安装 npm 依赖（如果之前使用了 npm 依赖的话）

四、解决报错

由于项目中使用了 sass，Hbuilder内置了sass模块，这里需要重新安装一下。

npm i sass -D
npm i sass-loader -D
npm i node-sass@4.14.1 -D

根据本地 node 版本下载 node-sass，版本不对应会报错

不同的 node 版本下载对应的 node-sass

node-sass node不同版本对应版本号 传送门

五、如果你的项目中使用了 uniui

安装

npm i @dcloudio/uni-ui 
# OR
yarn add @dcloudio/uni-ui

在跟目录 pages.json 中添加 easycom 节点

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

注意

• uni-ui 现在只推荐使用 easycom ，如自己引用组件，可能会出现组件找不到的问题
• 使用 npm 安装的组件，默认情况下 babel-loader 会忽略所有 node_modules 中的文件 ，导致条件编译失效，需要通过配置 vue.config.js 解决：

// 在根目录创建 vue.config.js 文件，并配置如下
module.exports = {
   transpileDependencies: ['@dcloudio/uni-ui']
}
// 如果是vue3 + vite, 修改 vite.config.js 或 vite.config.ts
export default defineConfig({
   optimizeDeps: ['@dcloudio/uni-ui']
})

本文中借鉴以下文献：

https://uniapp.dcloud.net.cn/component/uniui/quickstart.html
https://www.npmjs.com/package/node-sass?activeTab=versions
https://ask.dcloud.net.cn/article/35750