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 初始化)

相关链接

经验分享 程序员 微信小程序 职场和发展