关于Vue-Cli proxy 不生效的问题

前端开发中经常会遇到调后端接口跨域的问题，解决方法有很多，这里不做介绍了，（有兴趣的可以去这里看看：https://juejin.cn/post/6844904126246027278#heading-44）

今天主要说下Vue-Cli 中的代理，因为看到好多人按照官方文档配置，结果却不生效，为什么会这样呢，无外乎配置的不正确。
先看下官方的文档：

devServer.proxy
Type: string | Object

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：
module.exports = {devServer: {proxy: 'http://localhost:4000'}
}
这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。

如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。
module.exports = {devServer: {proxy: {'/api': {target: '<url>',ws: true,changeOrigin: true},'/foo': {target: '<other_url>'}}}
}

从文档中看，这种方式是给我们开发环境用的，其次是我们的请求要被开发服务器接收到，且不能匹配到请求，然后我们的请求就会被代理到配置的URL。

看懂了文档也就好找出我们配置不生效的原因,其实主要注意一下问题就行了（仅本地开发境适用，测试及生产时最好都部署在统一域名下，或者使用nginx代理）
1.配置好文件要重新启动服务，npm run dev
2.不是用对象形式代理的话比较简单，proxy: 'http://iqoo.want.com',就行了，前提是 .env.development 等环境文件中没有配置API默认路径，如果配置API的URL，就要注释掉，或者改为本地路径，否则代理不会生效，

NODE_ENV=development
VUE_APP_API_URL=development api url
VUE_APP_API_BASE_URL=http://iqoo.want.com/需要改为
NODE_ENV=development
VUE_APP_API_URL=development api url
VUE_APP_API_BASE_URL=http://localhost:9090/  端口改为自己设定的端口或者直接注释掉NODE_ENV=development
VUE_APP_API_URL=development api url
##VUE_APP_API_BASE_URL=http://iqoo.want.com/

3.path: options 成对的对象时，环境注意事项同上，这里主要注意 ‘/api’ ,如果后端接口没有 /api 这个路径，那么你需要在本地默认路径上加上，同时在代理后注销

.env.development
--------------------
NODE_ENV=development
VUE_APP_API_URL=development api urlVUE_APP_API_BASE_URL=http://localhost:9090/api/
或
VUE_APP_API_BASE_URL=/api/vue.config.js
----------------------
devServer: {port: 9090,open: true,https: false,proxy: {'/api': {target: 'http://iqoo.want.com',secure: false,pathRewrite: {'^/api' : ''}, //将/api转换成空字符changOrigin: true,}}}

也可以将‘’/API‘’换成真是的路径，具体根据项目变换，如果是真是的根路径，就不需要替换成空了


VUE_APP_API_BASE_URL=http://localhost:9090/Service/
或
VUE_APP_API_BASE_URL=/Service/devServer: {port: 9090,open: true,https: false,proxy: {'/Service': {target: 'http://iqoo.want.com',secure: false,changOrigin: true,}}}

环境和配置都没问题的话基本都会生效的（我没遇到的问题除外.......）

关于Vue-Cli proxy 不生效的问题相关推荐

Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...
Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
vue/cli 3.0 与 2.0脚手架怎样mock数据
vue/cli 3.0 与 2.0脚手架怎样mock数据 3.0 移除了 static 文件目次,新增了 public 目次,这个目次下的静态资本不会经由 webpack 的处置惩罚,会被直接拷贝,所 ...
Vue CLI 3 脚手架搭建
@[TOC](Vue CLI 3 脚手架搭建) 注意 see -> cli.vuejs.org/zh/guide/ Vue CLI 的包名称由 vue-cli 改成了 @vue/cli Vue ...
体验 vue cli 3.0
vue cli 3x 发布已经有好长一段时间了,webpack 4x 现在版本已经到了 4.28.0:如果你现在用或者不用手脚架搭建项目,我都推荐你使用 webpack 4x,体验一把新技术带来的变化 ...
Vue CLI 3.0脚手架如何在本地配置mock数据json
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
Vue Cli 项目结构简述
webnode_modules --Vue Cli 项目以来的js模块全放到这里public --存放静态资源存放自己的js cssfavicon.ico -- 浏览器小图标index.html - ...
vue3.0版本怎么修改服务器路径,@vue/cli 3.0 下通过npm命令切换不同服务器地址
在使用vue时,有一种情况比较麻烦,就是这个前端项目可能不止一个服务器地址,那么每个服务器地址都得打包一次,并且需要手动修改服务器接口地址. 首先知道可以使用环境变量方式将不同配置载入到不同模式下. ...
1. Vue CLI脚手架
1.1 介绍 Vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板,是Vue官方提供的标准化开发工 ...
Vue CLI 3.x 与 2.x的区别
主要区别安装与项目构建项目目录变化项目配置变化安装&项目构建 CLI安装 cli的包名变更 # cli 2.x npm install -g vue-cli# cli 3.x # 3. ...

关于Vue-Cli proxy 不生效的问题

devServer.proxy

关于Vue-Cli proxy 不生效的问题相关推荐

最新文章

热门文章