多环境变量配置

1.第一步

首先我们在项目根目录下找到package.json文件，在scripts中配置

"scripts": {
    "serve": "vue-cli-service serve", // 开发环境
    "build": "vue-cli-service build", // 生产环境
    "test": "vue-cli-service build --mode testing" // 测试环境
  },

我们根据不同的需要来使用不同的变量环境。

2.第二步

在根目录下创建.env.development .env.production .env.staging文件

• .env.development文件 生产环境

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

• .env.production文件 开发环境

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

• .env.staging 文件 测试环境

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

3.第三步

在根目录下的src文件夹中，新建一个config文件夹，专门用来保存我们的环境变量。

env.development.js
env.production.js
env.staging.js
index.js

在上面3个文件导出相应的baseUrl域名。
如：

module.exports = {
    baseUrl:"http://www.development.com"
}
// 开发环境

然后在index.js中引入一下

const config = require("./env." + process.env.NODE_ENV);
// process.env.NODE_ENV 我们使用哪个方式运行，就会引入相应的baseUrl
module.exports = config;
// 最后导出

4、第四步

在我们根目录下的src文件内main.js文件中引入

import {baseUrl} from "./config/index";
// 因为导出的是一个对象，结构赋值
console.log(baseUrl);

注意：如果测试环境时，需要额外配置一个js文件
在根目录下创建vue.config.js文件，然后写入

module.exports = {
  publicPath: "./"
  // 路径都换为 ./
};