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

本文链接：https://blog.csdn.net/Missxu1895/article/details/119761659

本文介绍了如何通过在Vue项目中使用两种方法实现打包后的dist文件夹内动态修改API地址，无需频繁打包。方法一是利用config.js文件，方法二是直接在index.html中设置静态IP。只需更改baseUrl即可应对不同服务器部署需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在public增加config.js文件

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

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

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

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

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
})

最后打包结果会出下一个config.js文件，以后就可以直接在那里面修改了

第二种：
直接在public下的index.html文件中用window自带的方法写被请求的ip地址：

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

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

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

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