@vue/cli 3.0 下通过npm命令切换不同服务器地址

在使用vue时，有一种情况比较麻烦，就是这个前端项目可能不止一个服务器地址，那么每个服务器地址都得打包一次，并且需要手动修改服务器接口地址。
首先知道可以使用环境变量方式将不同配置载入到不同模式下。
@vue/cli在默认情况下是没有vue.config.js文件的，通过使用vue ui方式让vue自己创建好或者直接在根目录创建。

环境变量配置

process.env.npm_config_argv 这个值是npm指令，通过console.log(process)找到的。
由于VUE在代码中使用环境变量需要使用VUE_APP_开头。

// 解析指令参数
const argv = JSON.parse(process.env.npm_config_argv);
const config = {};

// 获取自定义参数
let idx = 2;
const cooked = argv.cooked;
const length = argv.cooked.length;
while ((idx += 2) <= length) {
  config[cooked[idx - 2]] = cooked[idx - 1];
}

// 根据目标平台判断填充对应的环境变量(服务器地址)
if (config['--target'] === 'server1') {
  process.env.VUE_APP_API = 'http://192.168.0.50:8101';
} else if (config['--target'] === 'server2') {
  process.env.VUE_APP_API = 'http://192.168.0.50:8102';
} else if (config['--target'] === 'server3') {
  process.env.VUE_APP_API = 'http://192.168.0.50:8103';
} else {
  process.env.VUE_APP_API = 'http://loaclhost:8080';
}

// VUE 平台配置内容
module.exports = {
  productionSourceMap: false
}

环境变量使用

配置好之后就可以在项目中使用process.env.VUE_APP_API来获取当前使用值。

启用命令

-npm run build --target=server1 将使用http://192.168.0.50:8101作为服务器地址。
-npm run build --target=server2 将使用http://192.168.0.50:8102作为服务器地址。

在使用 npm run serve 指令统一生效。

拓展

根据这种方式还可以拓展出其他指令。

参考

-官方文档-模式
-官方文档-在客户端侧代码中使用环境变量