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

  1. 在public增加config.js文件
window.ipConfigUrl = {
    baseURL:"http://192.168.0.76:31900"
}
  1. 在public下的index.html引入config.js文件
<script type="text/javascript">
      document.write("<script src='./config.js?v=" + new Date().getTime() + "'><\/script>");
 </script>
  1. 在请求文件里使用,比如:
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
})
  1. 最后打包结果会出下一个config.js文件,以后就可以直接在那里面修改了
    在这里插入图片描述
    第二种:
    直接在public下的index.html文件中用window自带的方法写被请求的ip地址:
window.IPConfig = {
	//此处的IP在打包不会被编译,可修改
	baseURL: "192.168.1.94:8080" 
}

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

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

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

Logo

前往低代码交流专区

更多推荐