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+中也可以运行)
- 将 vue-cli 工程(需为uni-app项目)内的 src 目录复制一份,导入 HBuilderX 作为新工程。
- 在新工程目录内重新安装 npm 依赖(如果之前使用了 npm 依赖的话,记得先 npm init 初始化)