Vite 3.2.5配置代理proxy,打印代理转发的日志

已于 2022-12-06 13:11:03 修改
阅读量3.1k 收藏
点赞数
分类专栏： VUE 文章标签： vite vue proxy
于 2022-12-06 13:10:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bufegar0/article/details/128201146
版权

需求背景

使用vite代理模式后，想看看vite是否传递参数，故而需要打印出代理的转发日志。

使用方法

启动的时候，带上–debug参数即可。如下所示

npx vite --debug

另一种是借用 proxy 配置中的 rewrite 函数手动打印，例如 console.log()。自行尝试即可

样例

https://gitee.com/matevip/artemis

MateCloud微服务
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vite中配置了proxy代理，如何查看代理之后的真实接口地址？
wytccc的博客
04-17 1226
【代码】vite中配置了proxy代理，如何查看代理之后的真实接口地址？
vue3 借助vite配置了proxy代理情况，查看真实的接口调用地址方法
最新发布
yavlgloss的博客
08-16 422
vue3 借助vite配置了proxy代理情况，查看真实的接口调用地址方法
Vite的常见配置选项
m0_46543935的博客
07-16 1137
vite defineConfig Options 说明
vue-cli3 移除生产环境console打印的日志
weixin_39964419的博客
09-15 1732
vue 移除生产环境console打印的日志
vite+vue本地开发代理查看代理详情日志
wobofan2006的博客
09-19 1044
如下这般在vue-cli里有效的logLevel: 'debug’在vite环境下无效。然后要在package.json的启动命令里加上–debug。
vite 完整打印debug调试日志
鸿仔的博客
05-08 2111
【代码】vite 完整打印debug调试日志。
【前端工程化】经验总结01- vite项目打包buid之后会自动把所有的console.log过滤掉，生产环境打印日志log的方法，封装WebLogger打印日志
qq_17335549的博客
09-07 3416
【前端工程化】经验总结01- vite项目打包buid之后会自动把所有的console.log过滤掉，生产环境打印日志log的方法，封装WebLogger打印日志
vue启动后控制台输出日志信息
wltian
04-08 5751
1. 问题描述 在使用 npm run serve 启动vue项目时，控制台输出了许多日志信息 2.发生原因 linux系统的限制导致出现了这个问题，这里需要设置一下参数：fs.inotify.max_user_watches 3.解决办法 第一种解决方式： 编辑sysctl.conf文件，添加如下内容 fs.inotify.max_user_watches=524288 在终端执行 sysctl -p ,或者使用 sudo sysctl --system查询系统配置是否成功 成功后使用npm run
Vue使用Proxy代理后仍无法生效的解决
01-21
vue.js 配置了前端代理却未能生效 记录一下最近踩得小坑： 配置完代理后请一定重新执行（重要，非常重要！） npm run dev 若重新执行命令后，代理仍为生效，请按下方步骤进行检查： 检查index.js文件中的代理是否...
Vite配置跨域代理
catchmypow的博客
03-16 3952
Vite 配置跨域代理 修改vite.config.js文件 import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { proxy: { '/api': { target: 'http://
使用nodejs中httpProxy代理时候出现404异常的解决方法
12-23
在公司中使用nodejs构建代理服务器实现前后台分离，代码不能拿出来，然后出现httpProxy代理资源的时候老是出现404.明明被代理的接口是存在的。代码大概如下： var http = require('http'), httpProxy = require('...
vue3+vite 配置反向代理和跨域 设置端口号
weixin_45547638的博客
10-19 3503
在vite.config.ts 文件中直接配置。
使用webpack proxy配置开发环境代理，解决跨域问题。（Vue cli 3也适用）
janyxh的博客
07-23 2346
解决方案我写了一个例子，觉得有用的话，点个star。 地址：https://github.com/janyxh/vue-study/blob/master/vue.config.js -------------------------- 分割线 ----------------------- 最近调试接口，使用本地ip对接接口调试，在同事的机子上调试。 在Swagger和Postman上调试都没有...
「Vite」Vite4+vue3工程 结合环境变量，配置proxy代理
W-Mo-Mo的博客
08-03 1234
基于vite4+vue3搭建的工程，和后端联调时需要先配置proxy，配置代理的过程中遇到一些问题（比如启动报错、接口访问404等等），弯弯曲曲走了很多坑和弯路！这里我直接贴上解决思路和相关代码了，伙伴们有问题可以直接评论或者私信！
vue config.js proxy 代理使用记录
for_story的博客
12-21 2413
vue config.js proxy 代理使用记录 访问开发环境： proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: `http://192.168.2.37:8084`, changeOrigin: true, logLevel:'deb
Vite配置Proxy代理解决跨域问题
热门推荐
~~~
05-29 1万+
vite配置proxy代理属于node中间件代理，简单来说，就是通过开启一个代理服务器，来充当一个中间层的角色，拦截前端发起的请求。代理服务器实际做的事：会在前端页面发起请求时，将请求**转发**到真实的后端服务器，然后响应给浏览器。利用服务器之间不存在同源策略限制的原理，整个过程通过代理服务器完成，浏览器是无感的，就会绕过浏览器的同源策略。
vite/Vuecli配置proxy代理解决跨域
Suk__的博客
04-20 7065
上代码: import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { resolve } from 'path'; // https://vitejs.dev/config/ export default defineConfig({ server: { port: 9090, strictPort: true, // 严格端口 true:如果端口已被使用，则直接退出，而不会再
Vue3 - 获取 Proxy 对象代理中包裹的 “真实数据“，解决对象或数组打印后是 Proxy 对象无法拿到原始数据的问题（提供 2 种详细解决方案）
王佳斌
03-01 1万+
vue3如何取出proxy对象的值，vue3 Proxy 对象怎么获取到真实数据，vue3中的对象时为proxy对象如何获取值，vue3 获取ref里Proxy里的数据，vue3获取reactive中Proxy里的数据，vue3中如何获取proxy包裹的数据，vue3为什么里面的数据都是proxy对象类型，vue3中获取proxy包裹的数据,拿到原始对象，vue3数据变成了proxy如何解决，vue3中的对象时为proxy对象,如何获取值，vue3中获取proxy原始对象的问题，vue3获取proxy代理对
vite配置请求转发
qq_36022463的博客
12-01 293
【代码】vite配置请求转发。
vite配置代理proxy
08-25
你可以使用 Vite 的 `proxy` 配置选项来设置代理。在你的 Vite 项目根目录下的 `vite.config.js` 文件中，可以添加以下代码来配置代理： ```javascript module.exports = { // other vite config options... // 配置代理 proxy: { '/api': { target: 'http://your-api-server.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') }, // 可以配置多个代理 '/other': { target: 'http://other-server.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/other/, '') }, }, }; ``` 以上代码中，我们配置了两个代理，一个是 `/api` 开头的请求会被代理到 `http://your-api-server.com`，另一个是 `/other` 开头的请求会被代理到 `http://other-server.com`。`changeOrigin` 选项用于修改请求头中的 `host` 字段，`rewrite` 选项用于重写请求路径。 你可以根据自己的实际情况进行配置，将 `target` 修改为你的代理服务器地址，然后在前端代码中使用 `/api` 或 `/other` 开头的请求路径即可。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值