vue打包之后配置统一请求地址步骤详解
更新时间：2023年07月04日 11:28:14 作者：喜欢走弯路的人
这篇文章主要为大家介绍了vue打包之后配置统一请求地址实现步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
1.第一步
在public文件夹下新建一个config.js文件,并添加如下内容
exports.PLATFROM_CONFIG = {
baseURL: "服务器地址"
}2.第二步
在vue.config.js中根据路径引入后，修改服务器代理地址target
const PLATFROM_CONFIG = require('./public/config.js')
devServer: {
port: 8080,
proxy: {
'/fdapis': {
target: PLATFROM_CONFIG.PLATFROM_CONFIG.baseURL,//修改服务器代理地址
ws: false,
changeOrigin: true,
pathRewrite: {
'^/fdapis': '' //需要rewrite的,
}
}
}
},3.第三步
在封装的网络请求文件中设置默认请求地址，我的项目中请求地址在request.js文件中配置
首先，根据路径引入public文件中的config.js文件：
import PLATFROM_CONFIG from '../../public/config'
其次，根据地址配置，修改PLATFROM_CONFIG文件中的baseURL地址：
PLATFROM_CONFIG.PLATFROM_CONFIG.baseURL=localStorage.getItem('BASE_URL') // 在request.js中修改配置地址这里之所以从localStorage.getItem('BASE_URL') 中取值，并赋值给PLATFROM_CONFIG文件中的baseURL是由于，我的地址在登录时由用户自己配置服务器地址以及端口号，并存储在了session中。如下图所示：
用户自己配置服务器地址
4.最后统一配置服务器请求地址
Vue.prototype.BASE_URL = localStorage.getItem('BASE_URL') // 公共的服务器地址
以上就是vue打包之后配置统一请求地址的详细内容，更多关于vue打包请求地址配置的资料请关注脚本之家其它相关文章！
相关文章
使用el-row及el-col页面缩放时出现空行的问题及解决
这篇文章主要介绍了使用el-row及el-col页面缩放时出现空行的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue封装组件利器之$attrs、$listeners的使用
vue通信手段有很多种,props/emit、vuex、event bus、provide/inject等,还有一种通信方式,那就是$attrs和$listeners,下面这篇文章主要给大家介绍了关于Vue封装组件利器之$attrs、$listeners使用的相关资料,需要的朋友可以参考下2021-12-12
前端在做增删改查时通常会使⽤⼀个唯⼀数值做为数据的key值,下面这篇文章主要给大家介绍了关于Vue3前端生成随机id(生成 UUID)的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下2024-04-04
vue eslint报错:Component name “xxxxx“ should always be
新手在使用脚手架时总会报各种错,下面这篇文章主要给大家介绍了关于vue eslint报错:Component name “xxxxx“ should always be multi-word.eslintvue的4种解决方案,需要的朋友可以参考下2022-07-07
Vite+Vue3.0+ElementPlus+axios+TS搭建项目全过程
文章主要介绍了如何使用Vite构建项目,包括创建项目、代码规范（eslint、husky、prettti等等、EditorConfig配置等）,项目配置（CSS预处理器、样式重置、环境变量配置、axios封装、本地存储封装）和开发生产环境配置等内容2026-04-04
Vue使用axios(Ajax)+ElementUI实现登录实践
本文介绍了如何使用Vue和ElementUI框架创建一个登录页面,并实现前后端交互,同时,还讨论了跨域问题的解决方案以及ES6中的箭头函数2026-03-03
在本篇文章和里小编给各位总结了关于vue路由跳转传递参数的三种方式以及相关代码，需要的朋友们可以学习下。2020-05-05
这篇文章主要介绍了vue中render函数的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
本文介绍了如何删除全局和本地的webpack及其CLI,并提供了检查webpack残余文件的方法,总结了个人的操作经验,旨在为读者提供参考,并期待获得更多支持2024-09-09
详解让sublime text3支持Vue语法高亮显示的示例
本篇文章主要介绍了让sublime text3支持Vue语法高亮显示的示例，非常具有实用价值，需要的朋友可以参考下2017-09-09
最新评论