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

原创 已于 2022-12-06 13:11:03 修改 · 4.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vite #vue #proxy

于 2022-12-06 13:10:10 首次发布
本文介绍如何在使用Vite代理模式时查看代理转发的日志，通过启动时添加--debug参数或在proxy配置中使用rewrite函数并配合console.log()进行手动打印的方式实现。

需求背景

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

使用方法

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

npx vite --debug

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

样例

https://gitee.com/matevip/artemis

深入Vite核心编译能力
xiangzhihong8的专栏
07-13 540
我们知道，Vite 在开发阶段实现了一个按需加载的服务器，每一个文件请求进来都会经历一系列的编译流程，然后 Vite 会将编译结果响应给浏览器。而在生产环境下，Vite 同样会执行一系列编译过程，将编译结果交给 Rollup 进行模块打包。这一系列的编译过程指的就是 Vite 的插件工作流水线(Pipeline)，那它是如何实现的呢？
vite+vue本地开发代理查看代理详情日志
wobofan2006的博客
09-19 1928
如下这般在vue-cli里有效的logLevel: 'debug’在vite环境下无效。然后要在package.json的启动命令里加上–debug。
【前端工程化】经验总结01- vite项目打包buid之后会自动把所有的console.log过滤掉，生产环境打印日志log的方法，封装WebLogger打印日志
有一棵树的博客
09-07 3942
【前端工程化】经验总结01- vite项目打包buid之后会自动把所有的console.log过滤掉，生产环境打印日志log的方法，封装WebLogger打印日志
Vite代理配置：开发服务器与后端API集成
gitblog_01086的博客
09-18 1067
在现代前端开发流程中，开发服务器（Development Server）与后端API（Application Programming Interface）的集成是核心环节。当前端应用运行在`http://localhost:5173`，而后端服务部署在`http://localhost:3000`时，浏览器的同源策略（Same-Origin Policy）会阻止跨域请求，导致以下常见错误： ``...
vite 完整打印debug调试日志
鸿仔的博客
05-08 3277
【代码】vite 完整打印debug调试日志。
如何配置vite的proxy，以及解决post请求403问题
少油少盐不要辣
04-03 6762
vite项目，本地开发环境可以通过配置proxy代理实现跨域请求。但是生产环境，该配置不生效，一般使用nginx 转发，或者后端配置cors。
vite配置请求转发
qq_36022463的博客
12-01 576
【代码】vite配置请求转发。
vue config.js proxy 代理使用记录
for_story的博客
12-21 2844
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
【Nginx】核心概念与安装配置解释
积木成林，聚沙成塔
11-26 1272
Nginx是我们常用的一款Http和反向代理服务器，同时可以作为负载均衡器、邮件代理、HTTP缓存服务。它以其轻量级、高并发的特点广泛应用于各种场景。作为一名研发人员，掌握Nginx的应用和实践非常重要。本节主要解释一下Nginx中的几个常用核心概念，并聊一聊如何进行安装和配置。本篇讲述了Nginx的核心概念、安装，以及如何修改Nginx的配置文件，涵盖了Nginx入门相关的内容。
Vue3源码包解析与开发工具配置指南
开发者在构建应用时，通常会使用Vue CLI或者Vite作为项目的脚手架工具，这些工具提供了项目结构、配置和构建流水线的基础。Vue 3的响应式系统使用了Proxy代替了Vue 2中的Object.defineProperty()，使得响应式系统的...
vue面试题合集（强烈推荐）
weixin_62765236的博客
09-22 720
vue面试题合集（强烈推荐）
基于Spring Boot 3.x与Vue 3的全栈实践：设计与实现滁州市特产销售系统
最新发布
2201_76125393的博客
09-27 219
本文将深入探讨系统需求分析、技术选型、数据库设计、后端Spring Boot核心模块（如安全控制、业务逻辑、数据持久化）的实现、前端Vue 3与Element Plus组件的应用，以及前后端数据交互的细节。.requestMatchers("/api/auth/**", "/api/product/list", "/api/category/list", "/doc.html", "/webjars/**", "/v3/api-docs/**").permitAll() // 公开接口。
vite/Vuecli配置proxy代理解决跨域
Suk__的博客
04-20 7217
上代码: 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:如果端口已被使用，则直接退出，而不会再
Vite配置Proxy代理解决跨域问题
~~~
05-29 2万+
vite配置proxy代理属于node中间件代理，简单来说，就是通过开启一个代理服务器，来充当一个中间层的角色，拦截前端发起的请求。代理服务器实际做的事：会在前端页面发起请求时，将请求**转发**到真实的后端服务器，然后响应给浏览器。利用服务器之间不存在同源策略限制的原理，整个过程通过代理服务器完成，浏览器是无感的，就会绕过浏览器的同源策略。
Vite 配置代理 Proxy，解决跨域
热门推荐
wsdshdhdhd的博客
08-15 3万+
我们在编写前端项目的时候，经常会遇到跨域的问题，当我们访问后端 API 的 URL 路径时，只要域名、端口或访问协议（如 HTTP 和 HTTPS）有一项不同，就会被浏览器认定为跨域。另外我们也会经常重复编写后端的域名，例如，，针对这两种情况，可以直接用同一个配置来解决，即代理配置。​。...
vue+vite项目配置proxy输出代理后的完整接口路径
weixin_44463883的博客
09-12 886
【代码】vue+vite项目配置proxy输出代理后的完整接口路径。
vue3配置代理--[vite] http proxy error_[vite] http proxy error
2401_84437095的博客
04-27 5116
这样配置, 通用性更高一些。server: { // 中转服务器proxy: { // 通过代理实现跨域,搭理这个地址http://localhost:8081'/path': { // 路径, 作为就是替换域名target: 'http://127.0.0.1:8081', // 表示要替换的服务端地址changeOrigin: true, // 表示开启代理, 允许跨域请求数据secure: false, // 如果是https接口，需要配置这个参数。
vue3中打印reactive类型的proxy值
weixin_44257678的博客
09-23 533
之前用的vue2比较多，打印值挺方便，可是自从换了vue3，值类型都变成了proxy值，直接console.log(xx)打印不出来。原来在vue3要使用 toRaw。
vite配置代理proxy
08-25
你可以使用 Vite 的 `proxy` 配置选项来设置代理。在你的 Vite 项目根目录下的 `vite.config.js` 文件中，可以添加以下代码来配置代理： ```javascript module.exports = { // other vite config options... //...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值