uniapp HBuilderX 工程与vue-cli 工程相互转换

HBuilderX 工程转换为 vue-cli 工程

1.通过vue-cli命令行

1-1 环境安装

全局安装vue-cli（如果安装过忽略此步骤）

目前仍推荐使用 vue-cli 4.x，对于 vue-cli 5.x / Webpack 5 的支持情况参考

npm install -g @vue/cli@4

1-2 创建uni-app

vue create -p dcloudio/uni-preset-vue 项目名

此时，会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板，如下所示：

2.移植

使用 vue-cli 新建空工程

2-1 拷贝文件

将 HBuilderX 工程内的文件（除 unpackage、node_modules 目录）拷贝至 vue-cli 工程内 src 目录

将package.json 合并到vue-cli创建的新工程中

2-2 安装依赖

在 vue-cli 工程内重新安装 npm 依赖（如果之前使用了 npm 依赖的话）

2-3 更改路径别名

在vue.config.js中更改webpack配置

const path=require('path')  
module.exports = {
    // 配置路径别名  
    configureWebpack: (config) => {  
        config.resolve.alias['@']=path.resolve(__dirname,"./src");
    }
}  

vue-cli 工程转换为 HBuilderX 工程

当需要开发 App 端时，可以转换为 HBuilderX 工程（不转换直接在HBuilderX 2.0+中也可以运行）

1. 将 vue-cli 工程（需为uni-app项目）内的 src 目录复制一份，导入 HBuilderX 作为新工程。
2. 在新工程目录内重新安装 npm 依赖（如果之前使用了 npm 依赖的话，记得先 npm init 初始化）

相关链接

vue-cli命令行创建项目及其他注意事项
uni cli脚手架