前言

为满足自动化部署对 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']
 })

本文中借鉴以下文献：

uniapp.dcloud.net.cn/component/u… www.npmjs.com/package/nod… ask.dcloud.net.cn/article/357…