vue3.0版本怎么修改服务器路径,@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 指令统一生效。

拓展

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

参考