在使用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 指令统一生效。
拓展
根据这种方式还可以拓展出其他指令。
