摘要：随着市场需求的不断变化，原有的开发生产环境已经不能满足需求，多环境开发成为越来越多公司不得不面对的问题。本文首先介绍如何将创建好的uni-app项目转化为vue-cli项目，然后通过-env实现多环境配置，最后通过配置文件和git分支实现在不同环境下针对不同需求的变量化开发。

提醒：本站已经分享了7篇关于使用uni-app跨平台开发小程序的文章，有兴趣的可以用导航栏的搜索功能，今天我们来聊聊多环境开发，注意不是单单是生产和开发环境，而是不止三个环境！

用过uni-app的人都知道，创建的项目默认只支持两种开发模式，分别是：开发环境、生产环境。这两种模式对于大部分项目来说都是适用的，但是近些年有些公司可能会搞个预发布版本或者灰度测试，这时候原来的两种默认环境已经不能满足开发需求了。为了解决这个问题，提供了强大的vue-cli脚手架方式来开发项目。

由于很多读者的项目都是直接通过工具创建，而不是通过命令行，所以我们第一个问题就是如何将创建好的项目转为vue-cli脚手架开发。这个难题，我们可以在官方问答中找到答案。点我访问→→《将uni-app项目转为vue-cli项目》

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

1.实战演练

官方给出的解决方案是先用 vue-cli 创建一个项目，然后将我们的项目复制到新项目中。但是大多数情况下，我们都希望直接用 vue-cli 版本替换原项目。那么该怎么办呢？

我当时的做法是：先使用vue-cli创建一个使用和原项目相同模板的项目，然后对比配置文件.json和原项目，将多余的设置复制到原项目中，然后执行npm init重新安装项目依赖。

以上步骤只是解决了node包的问题，​​接下来在原项目中建立一个src目录，然后根据需要将其他文件移动到src目录下。

要验证项目是否已成功转换，请在项目根目录执行 npm run dev:mp-。

原本以为用vue-cli创建的项目会自动打开微信开发者工具，但其实不然，需要手动打开微信开发者工具并进行设置。命令行无法打开微信小程序开发者工具的小缺陷，下篇文章会解决，今天我们主要解决多环境开发的问题。

2.手动配置多个环境

现在我们的项目已经可以正常运行了。那么如何配置多环境呢？继续打开.json文件，在“”中可以看到很多自定义命令。例如：

"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