vue devserver配置,vue cli proxy

　　本文主要介绍了在vue-cli中使用devServer.proxy相关配置项的详细说明，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　 devServer.proxy相关的配置项描述，devServer.proxy中的changeOrigin参数，devserver . proxy中的pathRewrite参数，代理配置的详细描述，config.js文件引入了更多的依赖来控制代理行为。

devServer.proxy相关配置项的说明

　　如图所示：

devServer.proxy中的 changeOrigin 参数

　　当changeOrigin为false时，请求头中的主机仍然是浏览器发送的主机；如果设置为true:发送请求头中的主机将被设置为target的值。

devServer.proxy中的 pathRewrite 参数

　　在本例中，pathRewrite设置为^/lr: ，它具有以下功能：

　　要使用代理，你需要有一个标志，告诉该程序使用这个连接的代理。否则你的静态资源比如html，css，js，矢量图形等。可能都去代理。所以我们必须使用一个唯一的标识符来使接口使用代理，静态资源文件使用本地。

　　代理中的/lr:{}是告诉节点，我的接口在使用代理之前要以/lr开头。的所有接口必须写成/lr/xx/xx，从/lr开始，最后代理的接口路径path是http://localhost:8080/李荣/lr/xx/xx。

　　但是在例子中，真实的后台数据接口中没有 /lr，直接就是3358 localhost:8080/李荣/xx/xx。所以需要配置pathRewrite，用^/lr: 去掉 /lr，不仅有正确的标识，实际请求接口时也能去掉/lr。

devServer.proxy代理配置详解

　　如果您的前端应用程序和后端API服务器不在同一个主机上运行，那么您需要将API请求代理到开发环境中的API服务器。可以通过* .config.js中的devServer.proxy选项进行配置。

.config.js文件中引入依赖项

　　const proxy=require( http-代理-中间件)；

　　DevServer.proxy可以是指向开发环境的API服务器的字符串。

　　//服务器将任何未知请求(与静态文件不匹配的请求)代理到http://localhost:4000。

　　模块.导出={

　　devServer: {

　　代理：“http://localhost:4000”

　　}

　　}

更多的代理控制行为

　　const proxy=require( http-代理-中间件)；

　　模块.导出={

　　devServer:{

　　host: localhost ，//目标主机

　　端口：8080，

　　//代理：{/api:{}}，/api设置在代理中，项目中/api的请求路径替换为target。

　　代理服务器：{

　　/api:{

　　Target: 3358192.168.1.30: 8085 ，//代理地址，此处设置的地址将替换axios中设置的baseURL

　　ChangeOrigin: true，//如果接口是跨域的，需要配置这个参数。

　　//ws: true，//代理websockets

　　//pathRewrite方法重写url。

　　路径重写：{

　　^/api: /

　　//path rewrite:{ /API :/ }重写后的url是http://192.168.1.16:8085/xxxx

　　//pathrewrite: {/API:/API}重写后的url是http://192 . 168 . 1 . 16:8085/API/XXXX

　　}

　　}}

　　},

　　//.

　　}

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。