解决vue+webpack项目接口跨域出现的问题
更新时间：2020年08月10日 10:54:23 作者：辣姐什么鬼
这篇文章主要介绍了解决vue+webpack项目接口跨域出现的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1、config文件夹下index.js文件设置proxyTable(proxyTable后面的host可以设置也可以保持默认的localhost)
proxyTable: {
'/api': {
target: 'http://10.xx.xx.xx:8080/renter-server', // 开发环境
// target: 'http://10.xx.xx.xx:8080/renter-server', // 生产环境接口
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
host: '自己的IP或者默认的localhost', // can be overwritten by process.env.HOST
在使用axios请求的时候把所有接口的'http://10.xx.xx.xx:8080/renter-server'部分替换为'/api'
例如我们项目里axios的配置文件夹（自定义的）api下面的index.js文件里有如下配置
let env = process.env.NODE_ENV
let BASE_1, BASE_2
if (env === 'production') {// 生产环境 正式打包使用
BASE_1 = BASE_2 = CONFIG.apiHost
} else if (env === 'development') {// 开发环境 本地测试使用
BASE_1 = BASE_2 = '/api'
}
再用BASE1拼接进行请求
axios.get(BASE_1 + '/pc/getHouseList', {params: params})
补充知识：vue打包后404，webpack配置问题
首先声明这是基于vue2.x的
1.
将其中build的配置项assetsPublicPath进行修改，改为上图--》目的是将资源文件的引入路径，改为相对地址（相对index.html）
2.html中的js、css、img引入均没有问题，
但是css中的background-image还是报404
此时的问题原因是，使用了相对地址后，在css进行引入的图片路径，其相对的是css文件的路径
此时的修改方法是，修改build文件夹中的utils.js文件，增加一行代码搞定
以上这篇解决vue+webpack项目接口跨域出现的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
配置vite.confgi.ts无法使用require问题以及解决
这篇文章主要介绍了配置vite.confgi.ts无法使用require问题以及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
最近接触了vue项目,下面这篇文章主要给大家介绍了关于vue跳转到详情页的两种实现方法,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue路由守卫及页面登录权限控制的设置方法,本文通过实例代码通过两种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-03
如何解决vue-json-editor无法输入中文、重影问题
文章介绍了如何解决vue-json-editor组件无法输入中文和重影的问题,通过修改源码并使用vue-json-edit-fix-cn组件来 fix 这两个问题,同时,文章还提供了如何移除旧的依赖包并安装新的依赖包的步骤2025-01-01
这篇文章主要介绍了vue2路由中router-view不显示的原因及踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue 音乐App QQ音乐搜索列表最新接口跨域设置方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了如何在vue里面优雅的解决跨域(路由冲突问题),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
为了让一些不太清楚搭建前端项目的小白,更快上手,下面这篇文章主要给大家介绍了关于安装node.js以及搭建vue项目过程中遇到问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
今天小编就为大家分享一篇Vue动态获取width的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
vue实现ajax滚动下拉加载，同时具有loading效果(推荐)
这篇文章主要介绍了vue实现ajax滚动下拉加载，同时具有loading效果的实现代码，文章包括难点说明，介绍的非常详细，感兴趣的朋友参考下2017-01-01
最新评论