Vue2打包摆设后动态修改后端接口地址的解决方法

---

前言

本篇文章将介绍使用Vue2开发前后端分离项目时，前端打包摆设后可动态修改后端接口地址的解决方法。

---

一、背景

在前后端开发过程中，大家往往使用的是前后端分离模式举行开发，最终摆设服务器也分开举行摆设，因为前后端分离，前端要访问到后端接口必要将后台的接口地址打包到前端项目中，但是面对多变复杂的环境时，我们不能仅仅因为必要改个接口地址就得重新打包，上传摆设，比力麻烦，而且我们如果给客户摆设使用的时候还得提前获取到客户要摆设服务的IP地址，或者就得带着电脑，获取到客户的信息后，随时打包摆设，如许不但不敷专业，也比力麻烦，所以我们必要前端项目打包后，可动态配置后端接口地址且不影响前端功能的方法。
二、解决方法

以下介绍一种通过读取配置js的方式实现，打包后动态修改IP的方法步调，如下：
1.在public文件夹下创建config文件夹，并创建config.js文件

2.编写config.js内容

1. const config = {
2.         // 配置的后端接口地址
3.         "BaseUrl":"http://127.0.0.1:8080",
4.         // 配置的开关按钮，是否读取当前配置文件
5.         "switch": false
6. }

复制代码

3.在index.html中加载config.js

打开public 文件夹下的 index.html文件，然后在head 标签中添加 以下代码：

1. <script type="text/javascript" src="/config/config.js"> </script>

复制代码

如果你的config.js位置与我的不同，一定要修改引用地址。不要写错引用地址，不然会报错，我其时因为多写了个public路径结果卡在这个题目上了1个小时。
4.在封装axios工具类的js中修改配置

我们axios是封装到一个request.js中了，就是放到 axios.create({}) 前面设置获取 config.js中配置后端接口地址的逻辑即可。如下：

1. // 开关，是否使用配置文件中配置的接口地址
2. var switch1 = config.switch
3. // 默认使用 env环境中设置的接口地址
4. var baseUrl = process.env.VUE_APP_BASE_API
5. // 判断是否使用配置文件中的接口地址
6. if(switch1){
7.         // 开关开启，替换接口地址
8.         baseUrl = config.BaseUrl
9. }
11. const service = axios.create({
12.         // 设置后端请求接口地址
13.         baseURL:baseUrl
14. })

复制代码

至此完成代码部分的编写，后续测试的话，可以通过打包命令，打包完成后到dist文件夹下，修改config文件夹下的 config.js举行后端接口的动态修改了。
dist打包后的目录是这个样子的：

---

总结

到此这篇关于vue打包后修改配置后端接口地址的方法就介绍到这了。还有其他的方式也能修改，我用过其他产物，是在打包后的index.html中的script标签中直接写后端接口地址的，后续有时间会接着更新其他方法。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。