Vue2打包部署后可动态修改后端接口地址的解决方法
一、背景
在前后端开发过程中，大家往往使用的是前后端分离模式进行开发，最终部署服务器也分开进行部署，因为前后端分离，前端要访问到后端接口需要将后台的接口地址打包到前端项目中，但是面对多变复杂的环境时，我们不能仅仅因为需要改个接口地址就得重新打包，上传部署，比较麻烦，而且我们如果给客户部署使用的时候还得提前获取到客户要部署服务的IP地址，或者就得带着电脑，获取到客户的信息后，随时打包部署，这样不仅不够专业，也比较麻烦，所以我们需要前端项目打包后，可动态配置后端接口地址且不影响前端功能的方法。
二、解决方法
以下介绍一种通过读取配置js的方式实现，打包后动态修改IP的方法步骤，如下：
1.在public文件夹下创建config文件夹，并创建config.js文件
2.编写config.js内容
const config = {
// 配置的后端接口地址
"BaseUrl":"http://127.0.0.1:8080",
// 配置的开关按钮，是否读取当前配置文件
"switch": false
}
3.在index.html中加载config.js
打开public 文件夹下的 index.html文件，然后在head 标签中添加 以下代码：
<script type="text/javascript" src="/config/config.js"> </script>
如果你的config.js位置与我的不同，一定要修改引用地址。不要写错引用地址，不然会报错，我当时因为多写了个public路径结果卡在这个问题上了1个小时。
4.在封装axios工具类的js中修改配置
我们axios是封装到一个request.js中了，就是放到 axios.create({}) 前面设置获取 config.js中配置后端接口地址的逻辑即可。如下：
// 开关，是否使用配置文件中配置的接口地址
var switch1 = config.switch
// 默认使用 env环境中设置的接口地址
var baseUrl = process.env.VUE_APP_BASE_API
// 判断是否使用配置文件中的接口地址
if(switch1){
// 开关开启，替换接口地址
baseUrl = config.BaseUrl
}
const service = axios.create({
// 设置后端请求接口地址
baseURL:baseUrl
})
至此完成代码部分的编写，后续测试的话，可以通过打包命令，打包完成后到dist文件夹下，修改config文件夹下的 config.js进行后端接口的动态修改了。
dist打包后的目录是这个样子的：
总结
到此这篇关于vue打包后修改配置后端接口地址的方法就介绍到这了。还有其他的方式也能修改，我用过其他产品，是在打包后的index.html中的script标签中直接写后端接口地址的，后续有时间会接着更新其他方法。
以上就是Vue2打包部署后可动态修改后端接口地址的解决方法的详细内容，更多关于Vue2修改后端接口地址的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了Vue3中手动清理keep-alive组件缓存的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
vue项目中解决 IOS + H5 滑动边界橡皮筋弹性效果(解决思路)
最近遇到一个问题，我们在企业微信中的 H5 项目中需要用到table表格（支持懒加载 上划加载数据），但是他们在锁头、锁列的情况下，依旧会出现边界橡皮筋效果，这篇文章主要介绍了vue项目中解决 IOS + H5 滑动边界橡皮筋弹性效果,需要的朋友可以参考下2023-02-02
本文介绍了使用vue-cli搭建的项目在开发时配置跨域，上线后不做任何任何修改，接口也可以访问，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了深入理解vue中slot与slot-scope的具体使用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家介绍了npm run dev报错信息及解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要介绍了Vue3中使用setup通过ref获取子组件的属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了阿望教你用vue写扫雷小游戏，本文通过实例代码效果图展示的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
本篇文章主要介绍了vue实现登陆登出的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
vue前端项目发布的时候,打包可实现gzip格式的压缩,下面这篇文章主要给大家介绍了关于Vite打包性能优化之开启Gzip压缩的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue计算属性与监视(侦听)属性的使用,计算属性指的是通过一系列运算之后，最终得到一个值，watch监视(侦听)器允许开发者监视数据的变化，从而针对数据的变化做特定的操作，本文就这两种属性给大家详细讲解，感兴趣的朋友一起学习吧2022-11-11
最新评论