vue-cli中devServer.proxy相关配置项的使用

目录
  • devServer.proxy相关配置项的说明
    • devServer.proxy中的 changeOrigin 参数
    • devServer.proxy中的 pathRewrite 参数
  • devServer.proxy代理配置详解
    • .config.js文件中引入依赖项
    • 更多的代理控制行为

devServer.proxy相关配置项的说明

如图：

devServer.proxy中的 changeOrigin 参数

changeOrigin 为false时，请求头中host仍然是浏览器发送过来的host;如果设置成true：发送请求头中host会设置成target的值。

devServer.proxy中的 pathRewrite 参数

本示例中，pathRewrite设置了 '^/lr': '' ，作用如下:

使用代理，首先需要有一个标识，告诉程序这个连接要使用代理，不然的话，可能你的html、css、js、矢量图等静态资源都跑去代理。所以我们要通过一个唯一标识，让接口使用代理，静态资源文件使用本地。

proxy中的 '/lr':{······}，就是告诉node，我的接口是要以 /lr 开头的才使用代理。所有的接口都要写成 /lr/xx/xx ，以 /lr 开头，最后代理的接口路径路径就是 http://localhost:8080/lirong/lr/xx/xx

但是例子中真实的后台数据接口里没有 /lr，直接就是 http://localhost:8080/lirong/xx/xx ，所以就需要配置 pathRewrite，用'^/lr': '' 将 /lr 去掉，这样既有正确的标识，又能在真实请求接口的时候去掉 /lr 。

devServer.proxy代理配置详解

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

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

const proxy = require('http-proxy-middleware');

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串

//服务器会将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000上

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

更多的代理控制行为

const proxy = require('http-proxy-middleware');
module.exports = {   
devServer:{
    host: 'localhost',//target host
    port: 8080,
    //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
    proxy:{
        '/api':{
            target: 'http://192.168.1.30:8085',//代理地址，这里设置的地址会代替axios中设置的baseURL
            changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
            //ws: true, // proxy websockets
            //pathRewrite方法重写url
            pathRewrite: {
                '^/api': '/' 
                //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
                //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
           }
    }}
},
//...
}

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

赞 (0)

相关推荐

  • VueCli4项目配置反向代理proxy的方法步骤

    Vue Cli4创建项目之后,没有配置vue.config.js,如果直接发起axios请求,可能会引起跨域问题. 以豆瓣电影首页的最近热门 为例: axios({ method: "get", url: "https://movie.douban.com/j/search_subjects", params: { type: "movie", tag: "热门", page_limit: 50, page_start: 0

  • 深入浅析vue-cli@3.0 使用及配置说明

    使用vue-cli3已经有相当一段时间了,一直没怎么去注意其中的配置,所以趁着这段时间总结下应用过程中的一些经验,本文是从安装到开发使用的一个过程讲解,也可以说是新手向的文章,文字有点多,请耐心观看. (一)安装: 1.下载安装node: 登陆node官网并选择自己合适的node版本进行安装: 2.安装vue-cli脚手架工具 npm install -g @vue/cli # OR # 推荐使用 npm install -g yarn # 如果已有安装,此步骤不需要 yarn global a

  • 详解vue-cli脚手架build目录中的dev-server.js配置文件

    本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件 1.这个配置文件是命令npm run dev 和 npm run start 的入口配置文件,主要用于开发环境 2.由于这是一个系统的配置文件,将涉及很多的模块和插件,所以这部分内容我将分多个文章讲解,请关注我博客的其他文章 3.关于注释 •当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 4.上代码 // 导入check-versions.js文件,并且执行导入的函数,用

  • vue相关配置文件详解及多环境配置详细步骤

    1.package.json 作用: package.json 文件其实就是对项目或者模块包的描述,里面包含许多元信息.比如项目名称,项目版本,项目执行入口文件,项目贡献者等等.npm install 命令会根据这个文件下载所有依赖模块. 文件结构如下: { "name": "sop-vue", "version": "0.1.0", "author": "zhangsan <zhangsa

  • vue-cli中devServer.proxy相关配置项的使用

    vue-cli中devServer.proxy相关配置项的使用

    目录 devServer.proxy相关配置项的说明 devServer.proxy中的 changeOrigin 参数 devServer.proxy中的 pathRewrite 参数 devServer.proxy代理配置详解 .config.js文件中引入依赖项 更多的代理控制行为 devServer.proxy相关配置项的说明 如图: devServer.proxy中的 changeOrigin 参数 changeOrigin 为false时,请求头中host仍然是浏览器发送过来的hos

  • vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决

    目录 proxy 配置确认.解析 原因 一 原因二 注意 详解 pathRewrite changeOrigin 总结 proxy 配置确认.解析 devServer: { https: true, // 开启https模式 // 配置服务器代理 proxy: { '/api': { // 匹配访问路径中含有 '/api' 的路径 target: 'http://localhost:3000/', // 测试地址.目标地址 changeOrigin: true, ws: true, // 是否开

  • Vue CLI中模式与环境变量的深入详解

    Vue CLI中模式与环境变量的深入详解

    前言 在实际项目的开发中,我们一般会经历项目的开发阶段.测试阶段和最终上线阶段,每一个阶段对于项目代码的要求可能都不尽相同,那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果,使用不同的功能呢? 这里就需要引入环境的概念.官方文档中模式和环境变量说明 一般一个项目都会有以下 3 种环境: 开发环境(开发阶段,本地开发版本,一般会使用一些调试工具或额外的辅助功能): 测试环境(测试阶段,上线前版本,除了一些 bug 的修复,基本不会和上线版本有很大差别): 生产环境(上线阶段,正式对

  • Vue配置文件中的proxy配置方式详解

    1. 这里以axios发请求为例 axios.get("/abc/def"); axios.get("/abc/ghi"); axios.post("/abc/jkm"); axios发送的请求是本地的服务器地址拼接上发送的请求,如 http://localhost:8080/abc/def 2. 如果发送的请求都以 /abc 开头,那么我们就可以在proxy中进行服务器代理配置. devServer: { proxy: { "/abc

  • vue cli中env的使用指南

    目录 前言 简介-官方 示例配置 前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 test-单测)模式.其实这是小伙伴们没有理解 vueCli 文档所导致的. vueCli 命令中 --mode 对应的 .env.[mode],而不是 NODE_ENV 注意 除了 VUE_APP_ 变量之外. 还有两个特殊的变量: NODE_ENV: 是 develo

  • 深度了解vue.js中hooks的相关知识

    深度了解vue.js中hooks的相关知识

    背景 最近研究了vue3.0的最新进展,发现变动很大,总体上看,vue也开始向hooks靠拢,而且vue作者本人也称vue3.0的特性吸取了很多hooks的灵感.所以趁着vue3.0未正式发布前,抓紧时间研究一下hooks相关的东西. 源码地址:vue-hooks-poc 为什么要用hooks? 首先从class-component/vue-options说起: 跨组件代码难以复用 大组件,维护困难,颗粒度不好控制,细粒度划分时,组件嵌套存层次太深-影响性能 类组件,this不可控,逻辑分散,不

  • 浅谈Vue CLI 3结合Lerna进行UI框架设计

    当前大部分UI框架设计的Webpack配置都相对复杂,例如 Element. Ant Design Vue和Muse-UI等Vue组件库.例如Element,为了实现业务层面的两种引入形式( 完整引入 和 按需引入 ),以及抛出一些可供业务层面通用的 utils . i18n 等,Webpack配置变得非常复杂.为了简化UI框架的设计难度,这里介绍一种简单的UI框架设计,在此之前先简单介绍一下 Element 的构建流程,以便对比新的UI框架设计. 一般组件库的设计者将引入形式设计成 完整引入

  • vue项目中常用解决跨域的方法总结(CORS和Proxy)

    目录 一.什么是跨域? 二.如何解决跨域? 总结 一.什么是跨域? 跨域问题的出现是因为浏览器的同源策略问题.所谓同源就是必须有以下三个相同点:协议相同.主机相同.端口相同.如果其中有一项不同,即出现非同源请求,就会产生跨域.当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了 二.如何解决跨域? 跨域的解决方案: jsonpcorsNode中间件代理(两次跨域) 即 Proxynginx反向代理 CORS支持所有类型的HTTP请求,

  • 解决vue中使用proxy配置不同端口和ip接口问题

    问题描述: 使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致 例如:http://192.168.10.22:8081  或者 http://192.168.10.30:9999等 解决问题: 在vue.config.js中配置不同的端口号 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devSe

  • vue - vue.config.js中devServer配置方式

    前言 这里写你调用接口的基础路径,来解决跨域,如果设置了代理,那你本地开发环境的axios的baseUrl要写为'',即空字符串 只有一个接口ip端口时 devServer: { open: false, // 跨域 proxy: { '/nuojinadm/': { target: 'http://192.168.0.11/', changeOrigin: true } } } 2.设置axios中的baseUrl 与proxy端口一致 baseUrl: { dev: '/nuojinadm/

随机推荐