Vue项目devServer.proxy代理配置详解

目录概述需求：设计思路实现思路分析1..config.js文件中，引入依赖项2.devServer.proxy 可以是一个指向开发环境 API 服务器的字符串3.更多控制行为参考资料和推荐阅读

Survive by day and develop by night.

talk for import biz , show your perfect code,full busy，skip hardness,make a better result,wait for change,challenge Survive.

happy for hardess to solve denpendies.

目录

概述

Vue项目devServer.proxy代理配置详解的是一个非常常见的需求。

需求：

设计思路

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

实现思路分析

1…config.js文件中，引入依赖项

这里我们可以使用规则的数据结构来存储和转发。

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

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

module.exports = {

devServer: {

proxy: ‘http://localhost:4000’

}

}

3.更多控制行为

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

}

}}

},

//…

}

proxy: {

‘/bff/favoritesInfo’: {

// target: ‘http://192.168.85.85:5110/’,

target: ‘http://localhost:8080//’,

ws: false,

changeOrigin: true,

pathRewrite: { // 后端MOCK开关

‘^/bff/favoritesInfo’: ‘jsti-pm-bff-pc/bff/favoritesInfo’

}

},

sc: {

// target: ‘http://127.0.0.1:8082/’, // 请求本地 需要boot后台项目

ws: false,changeOrigin: true}

参考资料和推荐阅读

[1]. /p/8493282fe232

欢迎阅读，各位老铁，如果对你有帮助，点个赞加个关注呗！~

如果觉得《Vue项目devServer.proxy代理配置详解》对你有帮助，请点赞、收藏，并留下你的观点哦！