第 17 卷

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

configureServer：自定义 Dev Server 配置（如添加 Koa 中间件、修改服务器选项）。
handleHotUpdate：控制热更新流程（如过滤需要热更新的模块、自定义模块替换逻辑）。
configurePreviewServer：自定义预览服务器（生产构建后预览）的配置。

插件工作原理详解

Vite 插件的工作核心是“管道式拦截与处理”，结合开发环境和生产环境的不同流程，具体原理如下：

（1）开发环境（Dev Server）

浏览器发起模块请求（如 /src/main.js），Vite Dev Server 接收请求。
请求首先经过插件的 resolveId 钩子，解析模块的真实路径（如处理别名 @/main.js →

/src/main.js）。

接着通过 load 钩子加载模块内容（如读取本地 src/main.js 文件内容）。
然后通过 transform 钩子转换模块内容（如将 TypeScript 转译为 JavaScript、将 SASS 转译

为 CSS）。

最后将处理后的 ESM 格式内容返回给浏览器，完成一次模块请求的处理。
若涉及 Dev Server 扩展（如跨域代理、中间件），则通过 configureServer 钩子添加的逻辑

介入请求处理流程。

（2）生产环境（Rollup 打包）

Vite 调用 Rollup 进行打包，Rollup 启动后会扫描入口模块，构建依赖图。
在模块解析阶段，触发插件的 resolveId 钩子，解析模块路径。
在模块加载阶段，触发 load 钩子加载模块内容。
在模块转换阶段，触发 transform 钩子处理模块内容。
Rollup 按照插件处理后的模块和依赖关系，打包生成最终的产物文件（如

dist/assets/index.[hash].js）。

自定义 Vite 插件示例

以“替换模块中特定字符串”的简单插件为例，展示插件的实现方式：

Code block

1// vite-plugin-replace-string.js

2	export default function replaceStringPlugin(options = {}) {
3	const { search, replace } = options;
4	return {

10	return code.replace(new RegExp(search, 'g'), replace);
11	}
12	return code; //无替换时返回原代码
13	},
14	configureServer(server) {
15	//自定义Dev Server：添加一个中间件
16	server.middlewares.use((req, res, next) => {
17	if (req.url === '/custom-path') {
18	res.end('Hello from custom middleware!');
19	return;
20	}
21	next();
22	});
23	}
24	};
25 }

26 27// 在 vite.config.js 中使用

28import { defineConfig } from 'vite';

29import replaceStringPlugin from './vite-plugin-replace-string';

30 31export default defineConfig({

32plugins: [ 33replaceStringPlugin({

34	search: 'process.env.NODE_ENV',
35	replace: '"development"'
36	})
37	]
38 });

二十二、Vite项目如何配置代理(Proxy)来解决跨域请求问题?

在 Vite 项目中，跨域请求问题通常通过配置 Dev Server 代理（Proxy）解决。核心原理是：利用浏览器与 Dev Server 之间无跨域限制（同源），将前端发起的跨域请求转发到 Dev Server，再由 Dev

Server 代理转发到目标后端服务器，从而规避浏览器的同源策略限制。Vite 的代理配置基于 httpproxy-middleware 实现，支持丰富的自定义选项。

核心配置方式

Vite 的代理配置在 vite.config.js 的 server.proxy 选项中设置，支持两种配置格式：对象

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

3 4export default defineConfig({

5server: {

6	proxy: 'http://localhost:3001' //目标后端服务器地址
7	//前端发起的所有请求（如/api/user）都会被转发到http://localhost:3001/api/user
8	}
9 });

（2）高级配置：多代理规则（对象格式）

适用于复杂场景（如多后端服务、路径重写、自定义请求头），通过键值对定义代理规则，键为需要匹配的请求路径前缀，值为代理选项：

Code block

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

3 4export default defineConfig({

5server: { 6proxy: {

7// 规则1：匹配以 /api 开头的请求 8'/api': {

9	target: 'http://localhost:3001', //目标后端服务器地址
10	changeOrigin: true, //开启跨域：修改请求头中的Origin为目标服务器地址
11	rewrite: (path) => path.replace(/^\/api/, ''), //路径重写：去掉/api前

缀（如 /api/user → /user）

12headers: { // 自定义请求头

13	'X-Custom-Header': 'vite-proxy'
14	}
15	},
16	//规则2：匹配以/auth开头的请求（转发到另一个后端服务）
17	'/auth': {
18	target: 'http://localhost:3002',
19	changeOrigin: true,
20	secure: false //若目标服务器是HTTPS且证书不被信任，设置为false跳过证书验

证 21}

22}

全站分卷索引 · 26 卷