Vue配置开发、测试、生产环境

项目开发中，经常会将开发、测试、生产环境进行切换，最简单的办法就是将三个环境都写好，当要切换环境时，手动修改引用的地址，如下:

const hostConfig = {    
  dev: 'http://10.15.xxx.70:9999/',//开发  
  test: 'https://xxx.xxxx.com/service-api/',//生产    
  prod: 'https://xxx.2345.com/service-api/'//生产
}
   
  let host = hostConfig.prod;

这样虽然简单，但是不够灵活，每次切换环境都要修改代码，有时还会忘记修改，最好的办法是在脚本中通过打包命令切换接口环境，从而避免因为改代码而造成的错误。

解决方案：

通过scripts命令修改Node环境变量，再动态获取环境变量来匹配对应接口环境

首先：通过vue-cli命令创建项目，会生成如下文件目录：

在里面分别配置dev.env.js（开发环境），prod.env.js（生产环境）

dev.env.js

"use strict";
const merge = require("webpack-merge");
const prodEnv = require("./prod.env");
module.exports = merge(prodEnv, {  
    NODE_ENV: `"${process.env.NODE_ENV}"`
});

prod.env.js

"use strict";
module.exports = {
  NODE_ENV: `"${process.env.NODE_ENV}"`
};

process.env.NODE_ENV可以获取当前的环境，这里一定要注意要用单引号包裹一层双引号，不然编译时不能识别。

在package.json的scripts中，配置对应的打包命令，如下：

NODE_ENV=dev就是修改对当前node环境

此处cross-env是一个插件，用于解决window和Mac环境下打包命令的兼容问题，如果不使用cross-env命令，windows环境下会报错。

在接口配置文件中，就可以通过process.env.NODE_ENV来动态切换接口环境，比如：

let host = hostConfig[process.env.NODE_ENV]