多环境变量配置

在实际的开发中，经常会有多个环境用来测试，打包，发布等，需要手动更改一些参数来保证环境的正确，在发布生产版本的时候很容易造成因为参数错误造成打包错误出现生产问题，本文介绍一种简单的配置方式，用来切换多个环境，防止手动更改多个环境变量引发的问题。

1、package.json 里的 scripts 配置 serve、stage、build，通过 --mode xxx 来执行不同环境

通过 npm run serve 启动本地 , 执行 development
通过 npm run stage 打包测试 , 执行 staging
通过 npm run build 打包正式 , 执行 production

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

2、以 VUE_APP_ 开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。
  比如,VUE_APP_ENV = 'development' 通过process.env.VUE_APP_ENV 访问。
  除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV 和BASE_URL
  在项目根目录中新建.env.*
例：我们在根目录下创建3个文件分别是

1. .env.development // 开发环境
2. .env.production // 生产环境
3. .env.testing // 测试环境

然后在着3个文件中写入：

NODE_ENV = “development” ----------- 开发环境配置
NODE_ENV = “production” ---------------生产环境配置
NODE_ENV = “testing” -------------------- 测试环境配置

3、在根目录下的src文件中，新建一个config文件夹，专门用来保存我们的环境变量，创建三个对应文件，这样修改起来方便，不需要重启项目，符合开发习惯。

• env.development.js
• env.production.js
• env.testing.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: "./"
  // 路径都换为 ./
};