vue-cli构建项目反向代理配置

最新推荐文章于 2025-07-15 09:27:25 发布
最新推荐文章于 2025-07-15 09:27:25 发布
阅读量8.8k 收藏 3
点赞数 3
CC 4.0 BY-SA版权
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u012878818/article/details/73275319
本文介绍了一个配置请求代理的具体实现方案，包括不同的目标地址设置、源地址变更及路径重写等内容。通过对'/dlsys'、'/dlapi'和'/dlbiz'三个API路径的代理配置示例，展示了如何实现跨域请求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >





proxyTable: {//配置请求代理
'/dlsys':{
target:'http://192.168.16.209:81',
changeOrigin:true,
pathRewrith:{
'^/dlsys': '/dlsys'
}
},
'/dlapi':{
target:'http://192.168.16.209:81',
changeOrigin:true,
pathRewrith:{
'^/dlapi': '/dlapi'
}
},
'/dlbiz':{
target:'http://192.168.16.211:80',
changeOrigin:true,
pathRewrith:{
'^/dlbiz': '/dlbiz'
}
}
},
Vue-CLI 3.x 设置反向代理
weixin_43067157的博客
08-26 1万+
最近在项目中使用了Vue CLI 3.0版本，项目中需要设置反向代理解决跨域问题，下面记录一下设置过程。 新建配置文件 在项目的根目录下新建 vue.config.js 文件，自Vue CLI 3开始，项目中所有的配置信息都写在这个文件中（2在config目录中配置）。 配置反向代理 设置代理 module.exports = { devServer: { /...
【 vue2-cli 项目配置 】反向代理的配置
weixin_63904044的博客
05-08 881
2.路径重写 pathRewrite 重写的是在 请求时 替换我们设置的 process.env.VUE_APP_BASE_API 的请求路径 去掉域名 保留请求地址。在开发环境开发时 由于前端本地和后端本地不是处于同一个域名中，所以前端在请求后端接口的时候会产生跨域问题，所以反向代理主要是为了解决在本地开发时产生的跨域。因为在梳理反向代理的过程中，我一直不太理解不同的域名怎么请求的，虚拟服务器的域名是前端本地还是后端本地的，所以向chatGPT提出了疑问。并创建一个虚拟服务器，为了转发前端的请求。
vue设置反向代理
weixin_43617604的博客
05-21 1万+
proxyTable: { // 代理规则 '/api': { // 配置的url请求名字开头 // 代理的目标服务器地址,这个路径是我代理到服务器,即你要请求的第三方接口 target: 'http://10.18.110.107', // https请求需要该设置 secure: false, // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题.
Vue项目多代理配置指南：轻松搞定跨域请求分流！
最新发布
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
07-15 576
今天咱们来聊聊Vue项目中一个非常实用的技巧 - 如何配置多个代理服务器。相信不少小伙伴在对接多个后端服务时都遇到过跨域问题，这篇文章就教你如何优雅解决！
vue项目配置proxy反向代理
weixin_43254676的博客
05-05 1769
1、找到vue.config.js文件 在项目根目录下查找是否有vue.config.js，如果没有则手动创建，内容如下： module.exports = { // devServer的配置 devServer: { // 自定义端口 port: 8888, // 自动打开浏览器 open: true, // 用于配置反向代理 proxy: { // 代理请求， 匹配所有以/api开头的请求 '/api': {
vue CLI中反向代理proxy配置
weixin_47144417的博客
01-06 660
vue CLI中反向代理proxy配置 官方链接参考：https://cli.vuejs.org/zh/config/#devserver 项目中配置proxy 代码片段： devServer: { proxy: { '/': { // 目标地址 // target: "http://adult-dev.whxunw.com", target: "http://adult-test.whxunw.com", // 是否
vue cli 反向代理配置
MADRIDLV的博客
12-30 633
vue-cli 脚手架 反向代理配置实现 vue-cli版本为4.0 配置文件记得重启
详解vue-cli构建项目反向代理配置
01-19
本文介绍了vue-cli构建项目反向代理配置，分享给大家，具体如下： proxyTable: {//配置请求代理 '/dlsys':{ target:'http://192.168.16.209:81', changeOrigin:true, pathRewrith:{ '^/dlsys': '/dlsys' } }, '/...
Vue-cli项目部署到Nginx服务器的方法
10-16
Vue CLI 项目部署到 Nginx 服务器是将构建后的静态资源发布到 Nginx 服务器上，以便通过 Nginx 提供服务。 1. **Nginx 安装与基本操作** - Nginx 是一款高性能的 HTTP 和反向代理服务器，可以在多种操作系统上运行...
vue-cli配置反向代理解决跨域问题及过程详解
热门推荐
my_csdn2018的博客
09-30 3万+
vue-cli配置反向代理 vue-cli提供了配置反向代理的接口，即设置config/index.js中的proxyTable。配置如下: 组件中调用接口示例（axios） 上述示例请求的地址会被解析为http://moby.xbotech.com/api/login。如果proxyTable中pathRewrite配置为空，则请求的地址被解析为http://moby.xbotec...
Vue-CLI 3.X 部署项目至生产服务器的方法
10-17
Vue-CLI 3.X 的项目构建完成后会生成一个 dist 目录，这个目录下的文件包含了所有静态资源，可以被静态文件服务器托管。 首先，构建项目生成静态文件是一个重要步骤。在终端中运行 `npm run build` 或 `yarn build`...
vue反向代理
小混子得得的博客
04-21 241
反向代理 vue src同级目录添加vue.config.js module.exports={ publicPath:"./", devServer:{ proxy:{ '/api':{ target:'http://localhost:3000', changeOrigin:true, pathRewrite:{ '^/api':'' ...
vue项目的反向代理
weixin_63651791的博客
07-03 1306
【代码】vue项目的反向代理。
Vue反向代理服务器
qq_43789598的博客
07-04 384
Vue反向代理服务器
vue配置反向代理
weixin_44387746的博客
07-26 2574
1.首先在项目根目录下创建 vue.config.js 文件 2.在 vue.config.js 文件中添加以下代码 module.exports = { devServer: { proxy: { '/api': { target: 'http://m.baidu.com',//目标地址 ws: true, 是否启用websockets changeOri
vue-cli配置代理
weixin_45366504的博客
09-21 802
vue-cli 配置代理 npm 配置代理 // npm 配置代理 无账号密码配置 npm config set proxy http://IP:端口号 npm config set https-proxy http://IP:端口号 // 查看现有源 npm config get registry //设置淘宝源 npm config set registry https://registry.npm.taobao.org //再次更新新源 npm update 安装全局vue-cli4.0 npm
vue反向代理（跨域）
weixin_45280871的博客
04-17 408
vue-cli 的反向代理设置 情况1 1.在根目录下创建vue.config.js文件 在该文件下，写入如下代码（每次修改配置文件之后要重启） module.exports = { publicPath: './', devServer: { port: 8080, open: true, // 反向代理配置 proxy: { '/api': ...
vue 跨域 反向代理
zyx的博客
03-12 3148
Nginx proxy_pass 本地调试跨域接口前言Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器.Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,它已经在该站点运行超过两年半了.Igor 将源代码以类BSD许可证的形式发布.尽管还是测试版,但是,Nginx...
vue/cli-创建的项目中如何做反向代理
minx_6688的博客
08-23 236
在vue项目的根目录下创建一个vue.config.js target是你的目标地址 module.exports = { devServer: { proxy: { '/apd': { target: 'http://m.piaoniu.com', changeOrigin: true, pathRewrite: { '/apd': '' } } } } } 然后在向后台发
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值