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```文件中会有对应的运行和打包命令： ![uniapp1.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff40924adb1e4c4fad9baf3d529b6b77~tplv-k3u1fbpfcp-watermark.image) 需要注意的是命令中的```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```参数，名称与创建的环境文件对应修改前： ![uniapp2.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db11f09c423e4f1183358ded2a089137~tplv-k3u1fbpfcp-watermark.image) 修改后： ``` "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 ![uniapp3.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7cf643784dd2428cb1b2de478d183656~tplv-k3u1fbpfcp-watermark.image) npm run build:h5-pro/yarn build:h5-pro ![uniapp4.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d1caaf436c64fda8b9e84655ff02737~tplv-k3u1fbpfcp-watermark.image)