vue-cli3设置代理无效的解决
更新时间：2023年07月04日 09:34:29 作者：Tomoe20
这篇文章主要介绍了vue-cli3设置代理无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue-cli3设置代理无效
闲着无聊使用vue-cli3.0搭建了项目，在配置代理后运行的时候出现了如下情况：
但是这个接口直接拿地址拼接是能取数据的，如下（不好意思部分数据必须要隐藏哈）：
以下是我的vue.config.js,代理配置：
错误原因
pathRewrite中'^/api':’api‘i问题 // 冒号后面的api意思是用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替，改为如下：
运行项目 npm run serve,
问题解决
vue cli3 代理跨域 404（失败）问题
情景
在写vue cli 中的代理时，百度了好久也没代理上，最终的问题出在路径重写上。如果有跟我有一样问题的小伙伴，欢迎前来参考，可根据各自情况和实际问题进行调试。
接口地址
代理地址为（开发环境）
// .env.development 文件中
VUE_APP_BASE_API 在不同环境（ .env.production文件， .env.staging等文件中）为不同地址。
如没有此处，代理地址写死的话，下面的proxy中也要将对应代理地址改掉。
如：part2中。
注意：百度上搜的重新路径都是 ‘’ (空路径），一直代理不过去。找了半天发现需要代理到 '/' （根路径）。卡了好久，距离就差了这一点点问题（啊 啊啊啊 啊啊）。
*此处需要根据自己的接口状况来调试代理路径地址
浏览器中接口requestURL显示
response中已返回数据
（part2）不需动态改变proxy需代理的路径（即：下图 'api' 位置处）
//vue.config.js 文件中
将地址中 '/api' 代理到 '/' 中.
输出为：
http://127.0.0.1:8080/userInfo/getUserInfoList.do
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 表单绑定与组件的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要介绍了vue学习笔记之Vue中css动画原理,结合简单实例形式分析了Vue中css样式变换动画效果实现原理与相关操作技巧,需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了基于vue实现多引擎搜索及关键字提示的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了vue踩坑记录:属性报undefined错误问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
下面小编就为大家分享一篇vue项目中使用ueditor的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
今天小编就为大家分享一篇解决vue项目F5刷新mounted里的函数不执行问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
今天小编就为大家分享一篇vue监听input标签的value值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了关于el-col的使用,占据宽度的应用解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要给大家介绍了关于vue3监听resize窗口事件(离开页面要销毁窗口事件)的相关资料,vue是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了vue使用openlayers实现移动点动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
最新评论