Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.1k views
in Technique[技术] by (71.8m points)

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

就是打包后有一个单独的配置文件,修改这个配置文件的值就可以修改
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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

可以看下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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...