Vue2添加API接口地址修改配置文件的方法[艾思软件]

艾思软件-app开发公司

已于 2022-09-05 10:01:24 修改

阅读量1.6k

点赞数 1

分类专栏：前端 APP开发软件开发文章标签： vue.js 前端 javascript app定制开发艾思

于 2022-09-03 14:50:18 首次发布

本文链接：https://blog.csdn.net/windzjp/article/details/126677283

版权

在Vue的项目环境部署中, 经常遇到, Vue的的API接口地址需要修改的情况, 默认情况下, Vue打包后就没办法修改了, 修改一下就需要重新打包, 这给运维人员和开发人员都带来很多不开森. 添加个配置文件, 让运维人员随时修改接口地址是非常必要的. 可以经过下面简单几步实现.

1. 在vue项目/public目录下新建个aisi_config.js文件; 文件名可以自己随便定义

2. aisi_config.js文件中写入以下代码:

window.baseurl = "http://www.aisisoft.cn"

3. 在/public/index.html文件中引入aisi_config.js文件

<script src="aisi_config.js?v=<%=new Date().getTime()%>"></script>

4. 修改axios的baseURL: 这个地方, 每个项目, 第个框架的baseURL的名称和位置可能都不一样. 需要你对你的框架有一定的了解. 我的是在/src/utils/request.js中

//axios.defaults.baseURL = process.env.VUE_APP_BASE_API;  // 多环境配置
axios.defaults.baseURL = window.baseurl;  // 使用配置文件中的地址

5. 最后我的版本里使用

关注