位置: IT常识 - 正文
Vue项目devServer.proxy代理配置详解(Vue项目打包)
发布时间：2024-01-17推荐整理分享Vue项目devServer.proxy代理配置详解(Vue项目打包)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:Vue项目打包怎么发给别人,Vue项目登录密码放在哪里,Vue项目结构分析,Vue项目登录密码放在哪里,Vue项目实现报表功能,Vue项目实现报表功能,Vue项目优化,Vue项目优化,内容如对您有帮助，希望把文章链接给更多的朋友！
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]. https://www.jianshu.com/p/8493282fe232
欢迎阅读，各位老铁，如果对你有帮助，点个赞加个关注呗！~
上一篇：transformers包介绍——nlp界最顶级的包——可以不用 但不能不知道——python包推荐系列(transformerss)
下一篇：Java Web 开发详解(java web开发实例大全)
