uni-app跨端开发微信小程序之HBuilderX项目实现多环境开发

摘要：由于市场的需求不断变化，原有的开发环境和生产环境已经无法满足需求，多环境开发已经是越来越多的公司要面临的问题。本文先介绍如何将HBuilderX创建的uni-app项目转换成vue-cli项目，紧接着通过cross-env实现多环境的配置，最后通过配置文件和git分支实现不同环境下不同需求的多变开发。

提醒：本站中关于使用uni-app进行跨端开发小程序的文章已经分享过7篇，有兴趣的可以善用导航栏上的搜索功能。下面我们来聊聊多环境开发这件事，注意不是只有生产和开发环境，是三个以上的环境哦！

接触过uni-app的看官都知道通过HBuilderX创建的项目默认只支持两种开发模式的，分别是：开发环境development和生产环境production。这两种模式对于大多数项目都是适用的，但近年来有些公司可能会搞出个预上线版或灰度测试。那这个时候，原有的两种默认环境就无法满足开发需求了。为了解决这个问题，强大的HBuilderX又提供了通过vue-cli脚手架的方式来开发项目。

鉴于很多看官的项目都是直接通过HBuilderX工具创建而非通过命令行来创建，那我们的第一个问题是要将HBuilderX创建的项目转成vue-cli脚手架开发。对于这个难题，我们在官方问答中能够找到答案。戳我访问→→《uni-app HBuilderX 工程与 vue-cli 工程相互转换》

官方写的很简洁，只有三个步骤。

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

一、实战演练

官方给出的方案是先用vue-cli创建一个项目，然后把我们的项目再复制到新项目中，而实际的情况多半是我们要把原项目直接替换成vue-cli版的。那怎么办呢？

当时我的做法是：先用vue-cli创建一个跟原项目使用同样模板的项目，然后把配置文件package.json与原项目进行对比，把多出来的一堆设置复制到原项目里面，然后再执行npm init重装项目依赖。

上面这一步只是解决了node包的问题，接下来在原项目中创建src目录，然后按需求将其他文件移动到src目录中。

为了验证项目是否转换成功，在项目根目录下执行npm run dev:mp-weixin即可。

本来我以为用vue-cli创建的项目会自动打开微信开发者工具，可实际上并没有，需要你手动打开微信开发者工具并设置才行。命令行无法打开微信小程序开发者工具这个小缺陷会在下一篇中进行解决，今天主要解决多环境开发的问题。

二、手动配置多环境

现在，我们的项目可以正常跑起来了。那如何配置多环境呢？继续打开package.json文件，在"scripts"中可以看到很多自定义的命令。例如：

"scripts": {
   
  "serve": "npm run dev:h5",
  "build": "npm run build:h5",
  "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
  "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
  "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
  "build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
  "build:mp-alipay": "cross-env NODE_ENV=production UNI_P