uni-app多环境配置

  uniapp自身的配置只区分了生产（NODE_ENV=production）和非生产(NODE_ENV=development)环境，两者是uniapp内置的用来区分行为的。比如在小程序使用不同的环境变量时会在 dist文件夹下生成对应的 dev目录或者 build目录。但是在实际开发以及部署时还需要区分多套环境api配置。

---

1. 通过cli方式构建uniapp项目

uniapp提供两种方式创建项目：

1.通过HbuilderX编辑器创建

2.通过vue-cli创建

第一方式只能通过Hbuilderx进行开发运行发布没有对外暴露配置文件，区分多环境想到的办法只能是手动切换变量去加载不同的api。而第二种方式就可以使用自己顺手的编辑器开发(vscode yyds)，只要修改一下webpack的配置，使用不同的运行打包命令，就可以区分对应的环境配置，也方便jenkins自动打包部署。

如图，通过cli创建项目后 package.json文件中会有对应的运行和打包命令： 需要注意的是命令中的NODE_ENV变量是不能修改的，上面已经介绍过了它属于uniapp内置的，可以创建其他变量来区分环境。

2. 创建对应环境文件

假如需要区分出 开发测试环境、uat环境和生产环境，需要在根目录下创建对应的环境文件，命名方式：.env.环境名

.env.dev

# 开发环境配置
VUE_APP_ENV='dev'
VUE_APP_BASE_API = 'https://dev.com'

.env.uat

# uat环境配置
VUE_APP_ENV='uat'
VUE_APP_BASE_API = 'https://uat.com'

.env.pro

# 生产环境配置
VUE_APP_ENV='pro'
VUE_APP_BASE_API = 'https://pro.com'

3. 修改package.json

以h5环境下为例(为了简洁其他终端先删除)，在每个环境的命令下增加 --mode xxx参数，名称与创建的环境文件对应

修改前：

修改后：

"scripts": {
    "dev:h5-dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --mode dev",
    "dev:h5-uat": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --mode uat",
    "dev:h5-pro": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --mode pro",
    "build:h5-dev": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build --mode dev",
    "build:h5-uat": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build --mode uat",
    "build:h5-pro": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build --mode pro"
  },

---

此时我们再执行对应的命令，打印一下process.env,会发现不同的环境文件内的变量加载成功了

npm run dev:h5-dev/yarn dev:h5-dev

npm run build:h5-pro/yarn build:h5-pro