vue-cli环境变量和模式5.设置成功后，重新启动即可。

问题描述

在项目开发的时候，接口的地址或其他一些变量会根据环境的不同，也会有所变化，而且可能会经常切换环境，变量什么的也会改变

问题解决方法

创建不同模式下的环境变量

具体步骤（以下只是个案例，实际开发中根据自己的需求来）

举例描述: 开发中分三个模式生产环境(production), 开发环境(development)，本地环境(local)

在项目根目录下分别建立.env, .env.production, .env.development, .env.localserve 文件

// .env 文件里写的是各个环境下使用一致的变量  
// .env.production 文件里面写的是生产环境下的变量
// .env.development 文件里面写的是开发环境下的变量
// .env.localserve 文件里面写的是本地环境下的变量

修改package.json里面的scripts命令

// npm run localserve 是本地环境运行
// npm run serve 开发环境运行
// npm run build 生产环境运行
"scripts": {
  "localserve": "vue-cli-service serve --mode localserve",
  "serve": "vue-cli-service serve --mode development",
  "build": "vue-cli-service build --mode production"
},

建立config.js（这个在src里面建立，一般路径是src/config/config.js）

// 这里就可以不用判断当前环境，直接获取变量即可
// VUE_APP_BASEURL,VUE_APP_BASEURL,VUE_APP_OSSDOMAIN变量都是在第2步创建的文件中定义的，这里直接获取即可获取到当前环境下的变量值
const config = {
    baseUrl: process.env.VUE_APP_BASEURL,
    routerMode: process.env.VUE_APP_BASEURL,
    ossDomain: process.env.VUE_APP_OSSDOMAIN
}

export default config

5.设置成功后，重新启动即可。