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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue2使用TailwindCSS方法及遇到问题小结

    Vue2使用TailwindCSS方法及遇到问题小结

    Tailwind CSS是一个全新的、可定制的CSS框架,它提供了一系列的CSS类,用于构建现代化的Web界面,这篇文章主要介绍了Vue2使用TailwindCSS方法及遇到问题小结,需要的朋友可以参考下
    2024-03-03
  • 一文详解vue生命周期在uniapp中的用法

    一文详解vue生命周期在uniapp中的用法

    在uniapp中,vue的生命周期的用法基本都得以保留,但是对于特殊的需求以及特殊的情况,uniapp还引入了一些特有的生命周期钩子,本文给大家详细介绍了vue生命周期在uniapp中的用法,感兴趣的朋友可以参考下
    2024-01-01
  • vue3中watch和watchEffect实战梳理

    vue3中watch和watchEffect实战梳理

    这篇文章主要介绍了vue3中watch和watchEffect实战梳理,watch和watchEffect都是vue3中的监听器,但是在写法和使用上是有区别的。下文介绍他们之间的方法及区别,需要的朋友可以参考一下
    2022-07-07
  • Vue3中如何使用v-model高级用法参数绑定传值

    Vue3中如何使用v-model高级用法参数绑定传值

    本文给大家介绍Vue3中使用v-model高级用法参数绑定传值的相关知识,包括单个输入框传值和多个输入框传值,一个组件接受多个v-model值,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-10-10
  • Vue中使用Printjs插件实现打印功能

    Vue中使用Printjs插件实现打印功能

    Print.js 主要是为了帮助我们直接在我们的应用程序中打印 PDF 文件,无需离开界面,也无需使用嵌入,这篇文章主要介绍了Vue中使用Printjs插件实现打印功能,需要的朋友可以参考下
    2022-08-08
  • 浅谈VUE uni-app 基础组件

    浅谈VUE uni-app 基础组件

    这篇文章主要介绍了uni-app 的基础组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • vue3使用flv.js播放推流视频的示例代码

    vue3使用flv.js播放推流视频的示例代码

    本文主要介绍了vue3使用flv.js播放推流视频的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • Element-UI 使用el-row 分栏布局的教程

    Element-UI 使用el-row 分栏布局的教程

    这篇文章主要介绍了Element-UI 使用el-row 分栏布局的教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue中使用props传值的方法

    vue中使用props传值的方法

    这篇文章主要介绍了vue中使用props传值的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue组件间通信子与父详解(二)

    vue组件间通信子与父详解(二)

    这篇文章主要为大家详细介绍了vue组件间通信子与父的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论