700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 配置vue打包后可以更改接口地址

配置vue打包后可以更改接口地址

时间:2019-10-15 21:09:15

相关推荐

配置vue打包后可以更改接口地址

有时候我们会遇到这种情况,项目开发完打包后,安排其他同事需要去客户现场集成,我们在去之前也不知道客户的服务器地址,这时候就可以把接口地址配置成打包后也可以更改,这样会方便许多,下面是具体流程:

1. 创建config.js

我的vue-cli是3.X版本,所以没有static文件夹,只有public文件夹,而这个文件夹打包不会被编译,我们就在这个文件夹下创建自己的配置文件config.js

window.g = {BASE_URL: "http://127.0.0.1:8080/phm"}

2. 引用config.js

在public文件夹下的index.html引用该配置文件

<script type="text/javascript" src="config.js"></script>

3. 使用config.js

可以在封装 axios 的代码中,设置 baseUrl 时,直接使用 config.js 中配置的值。代码如下:

var baseURLStr = window.g.BASE_URL; // 设置可配置接口地址const instance = axios.create({timeout: 600 * 1000, //请求超时时间baseURL: baseURLStr,});

总结:

这样配置后打包后的文件结构如下图所示:

我们想修改服务器地址的时候,只需用记事本修改config.js里面的值就行,这样也不会影响开发模式。

注:vue项目中配置的proxy只是对于开发环境中将的localhost请求代理到,当项目发布到生产环境则是走nginx代理服务器,项目中的proxy配置无效。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。