vue 修改动态api地址（打包后实现动态修改api服务地址）

目前来说，前端和后端是分开的，然后运维那边想要换服务器，如果总换服务器，那api地址也是总换，就要不停的打包部署，现在就是想要实现打一次包就可以在打包的dist文件夹里动态修改api地址，在网上查到有两种方法都可以实现这种直接在dist文件里面进行修改，无需反复打包
第一种：

1. 在public增加config.js文件

window.ipConfigUrl = {
    baseURL:"http://192.168.0.76:31900"
}

2. 在public下的index.html引入config.js文件

<script type="text/javascript">
      document.write("<script src='./config.js?v=" + new Date().getTime() + "'></script>");
 </script>

3. 在请求文件里使用，比如：

const service = axios.create({
    baseURL: window.ipConfigUrl.baseURL, // url = base url + request url
    // baseURL: 'http://127.0.0.1:8888/', // url = base url + request url
    // withCredentials: true, // send cookies when cross-domain requests
    timeout: 5000, // request timeout
})

4. 最后打包结果会出下一个config.js文件，以后就可以直接在那里面修改了
   
   第二种：
   直接在public下的index.html文件中用window自带的方法写被请求的ip地址：

window.IPConfig = {
	//此处的IP在打包不会被编译，可修改
	baseURL: "192.168.1.94:8080" 
}

在请求文件里的方法使用就和第一种是一样的

同上两种方法在不同服务器部署的时候，直接编辑baseUrl即可实现修改api服务地址

参考：
vue.js打包发布后，实现动态修改api服务地址
VUE项目实现动态修改请求的服务器地址

最后

以上就是勤奋犀牛为你收集整理的vue 修改动态api地址（打包后实现动态修改api服务地址）的全部内容，希望文章能够帮你解决vue 修改动态api地址（打包后实现动态修改api服务地址）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。