[TOC] >[success] # vue-cli3.0多环境配置 通常开发运行项目时候只需要一个 **development（开发环境）** ， **打包** 时候却需要打 **n种环境（测试环境、uat环境、正式环境）** 的 **包(dist文件夹)** ，废话不多说进入主题，**配置多环境打包**。 >[success] ## 第一步：创建.env文件储存环境变量 ~~~ 在根目录下创建'.env.development'（开发环境）、'.env.production'（生产环境）'.env.uat'(uat环境)文件， 这里的'.env'后面的名字可以自己随便起，但是默认是有2种环境（development、production），如果想多增加 别的环境就手动创建新的.env文件即可 ~~~ 如图：  ~~~ 在对应的环境文件(.env.development、.env.production、.env.uat)中配置对应的环境的服务器地址即可，这里的 'VUE_APP_'是固定写法后面的URL自己可以随便起名字 ~~~ 有关[VUE_APP_](https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F)名称的说明。 >[success] ## 第二步：配置指令 修改 **package.json** 文件 ~~~ "scripts": { "serve": "vue-cli-service serve", // 这里运行的是.env.development文件的服务器地址 "build": "vue-cli-service build", // 这里运行的是.env.production文件的的服务器地址 "lint": "vue-cli-service lint", "uat": "vue-cli-service build -- mode uat", // 这里的 --mode是固定写法，后面的uat跟你前面起的名字一致 } ~~~ ~~~ 需要注意的地方： 'vue-cli-service build' 和 'vue-cli-service serve' 别搞混淆了 ~~~ >[success] ## 第三步：配置axios的BaseURL 在axios封装的js配置文件中修改 ~~~ baseURL: process.env.VUE_APP_URL // 配置axios请求服务器地址 ~~~ 这里需要注意 **process.env** 的属性（**VUE_APP_URL** ）一定要跟 **文件.env.xxx** 文件中配置的变量保持一致。 >[success] ## 第四步：打包操作 **执行打包指令** ： 1. **正式环境** ~~~ npm run build '或者' npm run build:prod ~~~ 2. **测试环境** ~~~ npm run build:dev ~~~ 3. **uat环境** ~~~ npm run build:uat ~~~