php网站做cdn,建筑工人招聘平台,wordpress 首页分页,电子商务企业网站建设前期规划方案文章目录 前言一、背景二、解决方法1.在public文件夹下创建config文件夹#xff0c;并创建config.js文件2.编写config.js内容3.在index.html中加载config.js4.在封装axios工具类的js中修改配置 总结 前言
本篇文章将介绍使用Vue2开发前后端分离项目时#xff0c;前端打包部署… 文章目录 前言一、背景二、解决方法1.在public文件夹下创建config文件夹并创建config.js文件2.编写config.js内容3.在index.html中加载config.js4.在封装axios工具类的js中修改配置 总结 前言
本篇文章将介绍使用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 typetext/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标签中直接写后端接口地址的后续有时间会接着更新其他方法。
