第 18 卷

第 18 / 26 卷日期：2026-01-02

target：必填，目标后端服务器的基础 URL（如 http://localhost:3001）。

• changeOrigin：可选，默认 false。开启后，代理会修改请求头中的 Origin 字段为

target 的地址，使后端服务器认为请求来自自身域名，从而通过跨域验证。

• rewrite：可选，路径重写函数。用于修改请求路径前缀（如前端用 /api 前缀标识接口请

求，后端实际接口无此前缀时，需通过 rewrite 去掉）。

• secure：可选，默认 true。若目标服务器是 HTTPS 协议，且证书不被信任（如本地开发环

境的自签名证书），设置为 false 可跳过证书验证。

headers：可选，自定义转发请求的请求头（如添加认证信息、自定义标识）。

• ws：可选，默认 false。开启后支持 WebSocket 代理（如后端有 WebSocket 服务时启

用）。

proxyTimeout：可选，代理请求超时时间（毫秒），默认 120000。

实际使用示例

假设前端项目运行在 http://localhost:5173（Vite 默认端口），后端接口运行在 http://localhost:3001，前端需要调用 http://localhost:3001/user/list 接口：

（1）配置代理

Code block

1// vite.config.js 2import { defineConfig } from 'vite';

3 4export default defineConfig({

5server: { 6proxy: {

7'/api': {

8	target: 'http://localhost:3001',
9	changeOrigin: true,
10	rewrite: (path) => path.replace(/^\/api/, '')
11	}
12	}
13 }
14 });

（2）前端发起请求

4	//前端请求/api/user/list→代理转发到http://localhost:3001/user/list
5	export const getUserList = async () => {
6	const res = await axios.get('/api/user/list');
7	return res.data;
8	};

注意事项

• 代理仅作用于开发环境：Vite 的 server.proxy 是 Dev Server 的配置，生产环境打包后不生

效。生产环境跨域需通过后端配置 CORS、Nginx 代理等方式解决。

• 路径匹配规则：代理规则的键是请求路径的前缀，若多个规则匹配，优先匹配更具体的前缀（如

/api/auth 比 /api 更具体）。

• WebSocket 代理：若后端有 WebSocket 服务（如实时消息），需开启 ws: true，示

例： '/ws': { target: 'ws://localhost:3001', ws: true }。

二十三、解释Vite中的HMR(模块热替换)原理。

Vite 的 HMR（模块热替换）是其核心开发特性之一，实现“代码修改后无需刷新整个页面，仅更新变化的模块”，且更新速度为毫秒级（不受项目大小影响）。其原理基于原生 ES 模块（ESM）和

WebSocket 实时通信，核心优势是“精准定位变化模块、最小化更新范围”，彻底解决了传统工具（如 Webpack）在大型项目中 HMR 速度随项目规模增长而变慢的问题。

Vite HMR 与 Webpack HMR 的核心差异

传统 Webpack HMR 需要重新编译变化模块及其依赖链，生成增量 bundle 并推送更新；而 Vite HMR 基于原生 ESM，无需打包，直接替换浏览器中的模块，核心差异如下：

对比维度	Webpack HMR	Vite HMR
更新基础	打包后的 bundle 模块	原生 ESM 模块
更新范围	变化模块 + 依赖链	仅变化模块（无依赖链处理）
速度特性	随项目增大变慢	速度恒定（毫秒级），与项目

大小无关

核心依赖Webpack 运行时 + 原生 ESM + WebSocket HotModuleReplacementPlu

gin

启动 Vite Dev Server 时，同时启动 WebSocket 服务器（用于服务端与客户端的实时通信）。
浏览器加载项目入口 HTML 时，Vite 会自动在入口脚本中注入 HMR 运行时代码（用于接收更新通

知、处理模块替换）。

HMR 运行时与 WebSocket 服务器建立连接，保持客户端与服务端的实时通信。

（2）文件监听：检测代码变化

Vite Dev Server 通过 chokidar 库监听本地源码文件（如 JS、Vue、CSS 等）的变化。
当开发者修改文件（如修改 src/Component.vue）时，文件系统触发变化事件，Vite 捕获该

事件。

（3）变化处理：生成更新信息并通知客户端

Vite 分析变化文件的类型（如 Vue 组件、JS 模块、CSS 文件），确定需要更新的模块 ID（基于文

件路径的唯一标识）。

对于不同类型的文件，执行针对性的预处理：JS/TS 模块：编译变化后的模块内容，生成 ESM 格

式代码。

Vue 组件：编译模板、样式和脚本，生成组件的 ESM 模块。
CSS/SASS 模块：编译样式内容，生成可注入的 CSS 字符串。
Vite 通过 WebSocket 向客户端发送更新通知，包含更新类型（如 update、 full-

reload）、变化模块 ID、更新资源路径等信息。

（4）客户端更新：模块热替换与状态保留

客户端 HMR 运行时接收 WebSocket 推送的更新通知，根据更新类型执行对应逻辑：
若为“模块更新”（如单个 Vue 组件、JS 模块变化）：通过 import() 原生 ESM 语法，请求并

加载变化后的模块（如 /src/Component.vue?t=123456，添加时间戳避免缓存）。

调用对应框架的 HMR 适配器（如 Vue 3 的 @vitejs/plugin-vue、React 的

@vitejs/plugin-react），执行模块替换逻辑：Vue 组件：卸载旧组件实例，挂载新组件实例，保留组件树其他部分的状态（如父组件、兄弟组件状态）。

JS 模块：替换模块的导出内容，通知依赖该模块的组件重新渲染（若模块导出未被其他模块依

赖，则直接替换）。

CSS 模块：通过 style 标签注入新 CSS，移除旧 CSS 标签，实现样式热更新。
若为“全量刷新”（如入口文件、配置文件变化，无法热替换）：HMR 运行时触发

全站分卷索引 · 26 卷