vue 修改动态api地址(打包后实现动态修改api服务地址)

目前来说,前端和后端是分开的,然后运维那边想要换服务器,如果总换服务器,那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项目实现动态修改请求的服务器地址

Vue.js项目中,如果你想在运行时动态修改打包后的服务地址,通常是在浏览器环境中,你可以使用JavaScript来操作`window.location`或者使用路由守卫(vue-router的`beforeRouteUpdate`或`beforeEach`)。以下是基本步骤: 1. **在配置文件**(如`main.js`或`src/router/index.js`)中,确保已经设置了一个默认的全局路由守卫。例如: ```javascript // main.js 或 router/index.js router.beforeEach((to, from, next) => { // 检查是否需要更新服务地址 const newServerUrl = ...; // 获取新的服务地址 if (newServerUrl !== window.__API_URL__) { // 如果有变化 window.__API_URL__ = newServerUrl; // 你可能还需要刷新页面或者手动触发路由更新 next(false); // 或者 next({ path: to.path, query: to.query }); } else { next(); } }); ``` 这里假设你之前有一个全局变量`__API_URL__`存储服务地址。 2. **获取新的地址**可以来自用户输入、后端返回的状态或者其他数据源。记得处理可能出现的错误情况。 3. **更新URL**使用`window.location.href`或`next`函数的路径参数,如果只改变路径而不想刷新整个页面,可以传递`false`给`next`函数。 4. **注意**这种方法并不适用于所有场景,比如SPA应用的SEO需求或者SSR(服务器渲染)环境,因为这些情况下可能需要更复杂的方式来管理服务地址。另外,频繁修改可能会导致缓存问题,需谨慎使用。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是小许同学吖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值