配置多环境变量

多环境变量是什么?

在vue的开发中有很多不同的环境，比如开发环境、测试环境、生产环境等，并且每一种环境下访问的域名，都是不一样的，所以，就可以通过配置多环境变量来执行不同的环境。

怎么配置多环境变量？

第一步：在package.json文件中，添加新的编译打包节点

• 通过 npm run serve 启动本地环境 , 执行 development
• 通过 npm run test 打包测试 , 执行 testing
• 通过 npm run build 打包正式 , 执行 production

"scripts": {
  "serve": "vue-cli-service serve --open",
  "test": "vue-cli-service build --mode testing",
  "build": "vue-cli-service build",
}

第二步：在项目根目录中新建三个.env.*文件

配置介绍:

以 VUE_APP_开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。
比如,VUE_APP_ENV ='development'通过process.env.VUE_APP_ENV 访问。
除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV 和BASE_URL

• .env.development 本地开发环境配置

NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'

• .env.testing 测试环境配置

NODE_ENV='testing'
# must start with VUE_APP_
VUE_APP_ENV = 'testing'

• .env.production 正式环境配置

NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

第三步：在src目录下创建config文件夹，在里面创建三个对应的env.*.js文件

这里我们并没有定义很多变量，只定义了基础的 VUE_APP_ENV development testing production
变量我们统一在 src/config/env.*.js 里进行管理。

但是既然这里有了根据不同环境设置变量的文件，为什么还要去 config 下新建三个对应的文件呢？
原因是修改起来方便，不需要重启项目，符合开发习惯。

1、配置对应环境的变量
比如本地开发环境env.development.js举例，

// 本地环境配置
module.exports = {
  baseUrl: 'xxxxxx'  // 项目地址
}

2、在config里面创建一个index.js文件，引入不同的配置

// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.NODE_ENV) 
//process.env.NODE_ENV为获取环境变量的固定语法
module.exports = config   //导出

第四步：在main.js中导入

// 根据环境不同引入不同baseApi地址
import { baseUrl } from '@/config/index.js'
console.log(baseUrl)

第五步：解决启动测试环境报错

在根目录下创建vue.config.js文件，

module.exports = {
   publicPath：'./'
}

执行测试以及正式环境，要打开打包后的dist文件里的index.html文件.
测试也是打包后的。