请问如何实现在vue打包后可以修改接口地址？

Question

就是打包后有一个单独的配置文件，修改这个配置文件的值就可以修改
axios访问地址。
网上挺多方法都试过，都是创建一个js文件，在index.html中导入

window.g = {
    baseurl: "xxx"
}

const g = {
    baseurl: "xxx"
}

export default  {
    baseurl: "xxx"
}

上面这三种都能获取到配置，但是要么打包后修改配置文件没效果，要么刷新页面就提示XX属性没定义，比如window.g.baseurl，从页面路由过去是正确的，刷新就提示baseurl没定义。
还有下面这种，创建一个json文件然后引入

var URL = require('../public/static/config.json');

也能获取到配置，但是打包后修改配置文件没效果。
我是想设置axios的baseURL，比如下面这样

axios.defaults.baseURL="xxx"

我是搞后端的，这个问题我搞了两天，实在搞不定了。。。
我的vue版本是@vue/cli 4.4.6

请问有没有比较详细的博客或者示例，跪谢啊。

Answer 1

可以看下vue-cli的文档, 模式和环境变量篇 https://cli.vuejs.org/zh/guid...

总之是可以新建不同的环境配置文件, 比如可以新建这样一套文件
测试环境: .env.testenv

NODE_ENV = 'test'
VUE_APP_ENV = 'test'
VUE_BASE_REQUEST_URL='XXX';

线上环境: .env.prodenv

NODE_ENV = 'production'
VUE_APP_ENV = 'production'
VUE_BASE_REQUEST_URL='XXX'

然后打包的命令修改一下就可以了。
"build-test": "vue-cli-service build --mode testenv",
"build-prod": "vue-cli-service build --mode prodenv",

在设置axios的时候就可以这样使用

axios.defaults.baseURL=process.env.VUE_APP_ENV