Vite 入门指南：快速了解现代前端开发 – wiki基地

作者： /

Vite 入门指南：快速了解现代前端开发

在现代前端开发的快节奏世界中，构建工具扮演着至关重要的角色。它们负责将我们编写的模块化、使用最新语法甚至预处理语言的代码，转换成浏览器能够理解和高效运行的格式。从早期的 Grunt、Gulp，到统治多年的 Webpack，再到后起之秀 Parcel，构建工具一直在不断演进。然而，随着项目规模的日益庞大和技术栈的日益复杂，传统构建工具的痛点也逐渐暴露：缓慢的启动时间、迟钝的热模块更新 (HMR)、以及常常令人望而却步的配置复杂性。

正是在这样的背景下，Vite 应运而生。由 Vue.js 的作者尤雨溪带领团队开发，Vite 旨在通过 leveraging (利用) 原生 ES Modules (ESM) 的能力，彻底革新开发体验，提供一种闪电般快速的开发服务器和高效的生产构建流程。本文将带您深入了解 Vite 的核心概念、它如何解决传统工具的痛点，并通过实践指导您如何快速上手 Vite 项目。

第一部分：理解现代前端构建面临的挑战

在深入了解 Vite 之前，我们有必要回顾一下传统构建工具（如 Webpack）的工作方式及其带来的挑战。

1. 基于打包器的开发模式 (Bundler-Based Dev)

Webpack 等工具的核心思想是：在开发服务器启动之前，先将整个应用的代码（包括应用代码、第三方库、样式、图片等）进行“打包”（Bundling）。这个打包过程涉及到代码解析、依赖分析、模块转换（如 Babel 转译、Less/Sass 编译）、合并、优化等一系列步骤。

痛点：

  • 漫长的启动时间 (Slow Cold Starts): 随着项目规模的增长，代码量和依赖数量急剧增加。打包整个应用需要花费大量时间，导致开发服务器启动非常缓慢，开发者需要等待漫长的时间才能开始工作。
  • 缓慢的热模块更新 (Slow Hot Module Replacement – HMR): HMR 的目标是在不刷新页面的情况下，实时更新浏览器中的代码。虽然 Webpack 也支持 HMR，但在大型项目中，当修改一个文件时，打包器需要重新构建受影响的模块及其依赖链，并将更新推送到浏览器。这个过程可能仍然需要几秒甚至十几秒，尤其是在涉及到样式或非 JS 资源的更新时。这打断了开发者的心流，影响了开发效率。
  • 复杂的配置 (Complex Configuration): Webpack 以其强大的可配置性著称，但也因此带来了复杂的配置。Loader、Plugin、Resolve、Optimization 等概念层出不穷，初学者往往需要花费大量时间去理解和配置，稍有不慎就可能出错。即使是经验丰富的开发者，面对复杂的项目需求时，也可能陷入配置的泥潭。
  • 难以调试 (Difficult Debugging): 打包后的代码通常会被合并、压缩，并且可能经过多种转换。虽然有 Source Map 可以辅助调试，但在复杂的打包输出中定位原始代码的问题有时仍然具有挑战性。

这些痛点在大型单页应用 (SPA) 或微前端项目中尤为突出，严重影响了开发者的幸福感和工作效率。现代前端急需一种更加高效、更符合原生模块化趋势的开发工具。

第二部分：Vite 的核心理念与工作原理

Vite 的核心理念是 “No Bundle Development” (无打包开发) —— 至少在开发阶段是如此。它巧妙地利用了浏览器对原生 ES Modules 的支持，并结合高效的预构建工具，极大地加速了开发流程。

1. 利用原生 ES Modules (Leveraging Native ES Modules)

这是 Vite 与传统打包器最根本的区别。在开发模式下，Vite 不会提前打包所有应用代码。当浏览器请求一个模块（例如你的 main.js）时，Vite 的开发服务器会直接提供这个模块的源码。如果这个模块中有 import 语句，浏览器会发送新的 HTTP 请求去获取这些被导入的模块。这个过程完全遵循浏览器原生的 ESM 加载机制。

工作流程：

  • 你的 HTML 文件中通常会有一个 <script type="module" src="/src/main.js"></script>。
  • 浏览器请求 /src/main.js。
  • Vite 开发服务器接收到请求，找到 src/main.js 文件，直接返回其内容。
  • 浏览器解析 main.js，遇到 import { createApp } from 'vue'。
  • 浏览器识别 'vue' 是一个模块标识符，因为它不是相对或绝对路径，浏览器不知道去哪里找。
  • Vite 开发服务器拦截到浏览器对 'vue' 的请求。Vite 知道 'vue' 是一个第三方库，它会去 node_modules 中查找，并找到其 ESM 入口文件（通常在 package.json 的 module 或 exports 字段指定）。
  • Vite 使用 Esbuild (一个用 Go 编写的极快 JavaScript 打包器/转换器) 对这个第三方库进行预构建 (Pre-bundling)。预构建的目的是将第三方库（尤其是那些包含 CommonJS 或 UMD 格式、或拥有大量嵌套依赖的库）转换成标准的 ESM 格式，并合并成一个或几个文件，解决浏览器加载大量嵌套模块时可能导致的性能问题（“网络瀑布”）以及 CommonJS 兼容性问题。
  • Vite 将预构建好的 'vue' 模块作为响应返回给浏览器，浏览器继续解析和加载 'vue' 及其自身的依赖。
  • 这个过程持续进行，直到所有应用代码所需的模块都被加载并执行。

优势：

  • 极快的启动时间： 开发服务器启动时无需打包整个应用，只需等待浏览器按需加载模块。这使得大型项目的启动时间从分钟级别缩短到毫秒或秒级别。
  • 按需编译： 只有当前屏幕上或通过交互触发的模块才会被加载和编译。未使用的代码不会在启动时浪费编译资源。

2. Esbuild 的角色：依赖预构建 (Dependency Pre-bundling)

尽管利用了原生 ESM，但 Vite 仍然需要在开发服务器启动前或按需对第三方依赖进行“预构建”。原因有二：

  • 兼容性： NPM 中的许多库仍然使用 CommonJS 或 UMD 模块格式。浏览器原生 ESM 不直接支持这些格式。Esbuild 可以快速地将这些格式转换成 ESM。
  • 性能： 许多库内部拥有大量的嵌套依赖模块。浏览器加载这些模块会产生大量的 HTTP 请求（网络瀑布），即使使用 HTTP/2 也会有性能瓶颈。Esbuild 可以将一个拥有上百个内部模块的库打包成一个或几个文件，显著减少请求数量，提升加载性能。

Esbuild 以其闪电般的构建速度而闻名，相比传统的基于 JavaScript 的打包器（如 Webpack 或 Rollup），它的速度可以快上 10 到 100 倍。Vite 利用 Esbuild 的这一优势，使得依赖预构建成为一个非常快速的过程，通常在首次启动或依赖发生变化时进行。预构建完成后，结果会被缓存，后续启动会更加迅速。

3. 闪电般的热模块更新 (Lightning-Fast HMR)

Vite 的 HMR 基于原生 ESM。当修改一个模块时：

  • Vite 开发服务器只需要精确地识别出被修改的模块。
  • 它会利用 WebSocket 向浏览器发送一个 HMR 更新信号。
  • 浏览器接收到信号后，请求更新后的模块代码。
  • Vite 服务器只编译并返回被修改的模块，这个过程因为无需打包整个应用而非常快速。
  • 浏览器接收到新的模块代码后，Vite 的 HMR 运行时会替换掉旧的模块实例。如果模块导出了 HMR 接口 (import.meta.hot)，它会执行相应的处理逻辑（例如，Vue 或 React 组件会自动实现 HMR 接口，实现无感更新）。

优势：

  • 速度极快： HMR 更新通常在毫秒级别完成，开发者几乎感觉不到延迟。
  • 精确更新： 只重新加载和编译被修改的模块及其直接相关的模块，最大程度地保留应用状态。

4. 基于 Rollup 的生产构建 (Production Build with Rollup)

尽管开发模式下利用原生 ESM，但为了获得最佳的生产环境性能，打包仍然是必要的。生产环境构建需要进行代码压缩、Tree Shaking (摇树优化，移除未使用代码)、代码分割 (Code Splitting)、资源文件哈希等优化，以减小文件体积、提高加载速度、利用浏览器缓存。

Vite 选择 Rollup 作为其生产构建的打包器。Rollup 在 ESM 打包方面做得非常出色，并且其输出通常比 Webpack 更小巧和高效，尤其适合构建应用和库。

工作流程：

  • 运行生产构建命令 (vite build)。
  • Vite 调用 Rollup，并应用一系列内置的优化配置。
  • Rollup 从应用的入口文件开始，进行依赖分析，并将所有代码打包成优化后的静态资源文件（HTML, CSS, JS, Assets）。
  • JavaScript 文件会经过 Tree Shaking、压缩（默认使用 Terser），并可能进行代码分割。
  • CSS 文件会被合并、压缩。
  • 静态资源文件会被处理（如路径修正、URL 内联、文件名哈希）。

优势：

  • 高度优化： 利用 Rollup 及其丰富的插件生态，生成高度优化、适合生产环境部署的静态资源。
  • 开箱即用： Vite 提供了一套合理的默认生产构建配置，大多数情况下无需手动配置。

总结 Vite 的核心优势：

  • 闪电般快速的开发服务器启动和 HMR。
  • 利用原生 ESM，开发模式下按需编译。
  • 使用 Esbuild 进行极速依赖预构建。
  • 基于 Rollup 输出高度优化的生产构建。
  • 开箱即用的配置，简化开发体验。

第三部分：快速上手 Vite 项目

现在，让我们通过实践来体验 Vite 的魔力。

1. 前置条件

确保您的开发环境安装了 Node.js。推荐使用 Node.js 的最新 LTS 版本。您可以通过在终端运行以下命令来检查 Node.js 版本：

bash
node -v
npm -v

Vite 需要 Node.js 版本 14.18+ 或 16+。

2. 创建第一个 Vite 项目

使用 NPM、Yarn 或 PNPM 都可以方便地创建 Vite 项目。Vite 提供了一个官方的脚手架工具 @vitejs/create-vite。

打开终端，运行以下命令：

“`bash
npm create vite@latest

或者

yarn create vite

或者

pnpm create vite
“`

运行命令后，您会进入一个交互式命令行界面，用于配置项目：

✔ Project name: » my-vite-app
✔ Select a framework: » Vue # 选择你喜欢的框架，或选择 vanilla
✔ Select a variant: » Vue # 选择变体，例如 Vue (JavaScript) 或 Vue-ts (TypeScript)

根据提示输入项目名称（例如 my-vite-app），然后选择您想要使用的框架（如 Vue, React, Preact, Lit, Svelte, Vanilla JavaScript/TypeScript）。Vite 对主流框架提供了开箱即用的模板。

选择框架和变体后，脚手架会在当前目录下创建一个新的项目文件夹。

3. 进入项目并安装依赖

进入新创建的项目目录：

bash
cd my-vite-app

安装项目依赖：

“`bash
npm install

或者

yarn install

或者

pnpm install
“`

等待依赖安装完成。这个过程可能会花费一些时间，取决于您的网络速度。

4. 运行开发服务器

依赖安装完成后，您就可以启动 Vite 的开发服务器了：

“`bash
npm run dev

或者

yarn dev

或者

pnpm dev
“`

Vite 开发服务器会迅速启动，并在终端显示本地开发服务器的地址（通常是 http://localhost:5173）。

“`

[email protected] dev
vite

VITE v4.x.x ready in 123 ms # 注意这里的启动速度！

➜ Local: http://localhost:5173/
➜ Network: use –host to expose
➜ press h to show help
“`

打开浏览器，访问显示的本地地址。您应该能看到一个运行着您所选框架的简单应用页面。

5. 体验极速 HMR

现在，尝试修改项目中的代码文件，例如修改 src/App.vue (Vue) 或 src/App.jsx (React) 文件中的文本或样式。保存文件后，观察浏览器。您会发现页面几乎是瞬间更新的，没有任何明显的刷新或延迟。这就是 Vite 极速 HMR 的魅力！

6. 理解项目结构

一个基础的 Vite 项目结构通常如下所示（以 Vue + JavaScript 为例）：

my-vite-app/
├── node_modules/ # 项目依赖
├── public/ # 静态资源目录，不会被打包，直接复制到输出目录
│ └── vite.svg
├── src/ # 源代码目录
│ ├── assets/ # 静态资源（会经过构建处理）
│ │ └── vue.svg
│ ├── components/ # 组件目录
│ │ └── HelloWorld.vue
│ ├── App.vue # 应用根组件
│ └── main.js # 应用入口文件
├── .gitignore # Git 忽略文件
├── index.html # 应用的入口 HTML 文件
├── package.json # 项目配置文件
├── vite.config.js # Vite 配置文件 (可选，用于自定义配置)
└── README.md

关键文件说明：

  • index.html: 非常重要！ Vite 将 index.html 视为应用的入口点。与传统打包器需要在 JS 入口文件中挂载应用不同，Vite 鼓励将 <script type="module" src="..."> 放在 index.html 中，利用原生 ESM 加载入口 JS 文件。Vite 开发服务器会自动处理 index.html，注入必要的 HMR 客户端脚本等。在构建时，它也会作为模板进行处理。
  • src/main.js (或 .ts, .jsx, .tsx): 应用的 JS/TS 入口文件，负责导入框架、根组件并将其挂载到 index.html 中的 DOM 元素上。
  • public/: 此目录下的文件在开发和构建时会被直接复制到输出目录的根目录。它们不会经过任何构建处理（例如压缩、哈希）。适合存放不经常变动且需要在根路径访问的资源，如 favicon.ico。在代码中引用时，使用根路径 /，例如 <link rel="icon" href="/favicon.ico">。
  • src/assets/: 此目录下的文件（图片、字体等）会被 Vite 的资产处理机制处理。导入这些文件时，Vite 会返回其 URL。在生产构建中，这些文件通常会经过哈希处理以利用缓存。

7. 构建生产版本

当您准备将应用部署到生产环境时，需要运行构建命令：

“`bash
npm run build

或者

yarn build

或者

pnpm build
“`

Vite 会使用 Rollup 对项目进行生产构建。构建完成后，会在项目根目录下生成一个 dist 目录（默认）。

“`

[email protected] build
vite build

vite v4.x.x building for production…
✓ 43 modules transformed.
dist/index.html 0.48 kB
dist/assets/vue.svg 1.45 kB
dist/assets/index.css 0.15 kB / brotli: 0.08 kB
dist/assets/index.js 1.53 kB / brotli: 0.88 kB
✓ built in 0.63s # 注意这里的构建速度！
“`

dist 目录包含了所有生产环境所需的静态文件，可以直接部署到任何静态文件服务器上。

8. 预览生产构建

构建完成后，您可以使用 Vite 内置的预览服务器在本地测试构建结果：

“`bash
npm run preview

或者

yarn preview

或者

pnpm preview
“`

“`

[email protected] preview
vite preview

➜ Local: http://localhost:4173/
➜ Network: use –host to expose
“`

打开浏览器访问 http://localhost:4173，您将看到运行在本地的生产构建版本。这是一个轻量级的静态文件服务器，用于验证构建是否正确。

第四部分：Vite 的核心功能和特性详解

除了闪电般的速度，Vite 还提供了许多现代前端开发所需的核心功能。

1. 对各种框架的友好支持

Vite 对当前主流的框架提供了官方或社区维护的插件，实现了开箱即用的集成：

  • Vue: @vitejs/plugin-vue (支持 Options API 和 Composition API, SFC – 单文件组件)
  • React: @vitejs/plugin-react (支持 React Refresh 进行快速 HMR)
  • Preact: @vitejs/plugin-react 或 @preact/preset-vite
  • Lit: @vitejs/plugin-react (作为 Lit element 的编译工具)
  • Svelte: @sveltejs/vite-plugin
  • Vanilla JS/TS: 无需额外插件，直接使用。

创建项目时选择框架即可自动配置相应的插件。

2. 内置的 TypeScript 支持

Vite 提供了一流的 TypeScript 支持。它直接利用 Esbuild 进行 .ts 或 .tsx 文件的转译，速度非常快。

  • 类型检查： Vite 本身只负责转译，不做类型检查。为了在开发过程中进行类型检查，Vite 推荐使用单独的进程来运行类型检查，例如在命令行运行 tsc --noEmit --watch。很多框架的 Vite 插件（如 @vitejs/plugin-vue 的 vue-tsc 支持）也集成了类型检查。
  • 配置： 只需在项目根目录放置一个 tsconfig.json 文件即可。Vite 会自动读取并使用其中的编译器选项（如 target, module, jsx 等）。无需额外的 TypeScript loader 或 plugin 配置。

  • 导入 .vue 组件的类型： 对于 Vue 单文件组件，需要在 src 目录下创建一个 env.d.ts 文件，并添加以下内容以提供类型支持：

    “`typescript
    ///

    declare module ‘*.vue’ {
    import type { DefineComponent } from ‘vue’
    const component: DefineComponent<{}, {}, any>
    export default component
    }
    “`

3. CSS 支持

Vite 对 CSS 提供了原生支持，并且可以轻松集成 CSS 预处理器。

  • 导入 CSS: 在 JavaScript/TypeScript 文件中直接 import './style.css' 即可。Vite 会将 CSS 注入到页面中。
  • CSS Modules: 支持开箱即用的 CSS Modules。文件名约定为 [name].module.css，然后在 JS 中导入：import styles from './style.module.css'; console.log(styles.className);。
  • CSS Pre-processors: 支持 Sass, Less, Stylus。只需安装相应的预处理器包（sass, less, stylus），Vite 会自动检测并应用：import './style.scss'。
  • PostCSS: 支持 PostCSS。如果在项目根目录放置 postcss.config.js，Vite 会自动应用。

4. 静态资源处理

Vite 对静态资源（如图片、字体、JSON、WebAssembly）的处理非常智能。

  • 导入资源： 在 JavaScript 中 import imageUrl from './assets/logo.png'，imageUrl 变量会得到图片的 URL。在生产构建中，这个 URL 包含哈希，例如 /assets/logo-hash.png。图片内容也会被优化处理。
  • URL 内联： 对于小的图片或字体，Vite 支持将其 URL 内联为 Base64 字符串，减少 HTTP 请求。
  • Public 目录： 如前所述，public 目录下的资源直接复制到根目录，适合 index.html 中引用的资源（如 favicon）或不需要哈希的资源。

5. 环境变量

Vite 通过 import.meta.env 对象暴露环境变量，这是一种符合 ES Modules 标准的方式。

  • 内置变量： import.meta.env.MODE (当前模式，development 或 production)，import.meta.env.BASE_URL (应用的公共基础路径)，import.meta.env.DEV (开发模式，布尔值)，import.meta.env.PROD (生产模式，布尔值)。
  • 自定义变量： 可以在项目根目录下创建 .env 文件。
    • .env: 所有模式下都加载。
    • .env.local: 所有模式下都加载，但会被 git 忽略（通常）。
    • .env.[mode]: 特定模式下加载（例如 .env.development）。
    • .env.[mode].local: 特定模式下加载，会被 git 忽略。
    • 加载优先级：.env.[mode].local > .env.[mode] > .env.local > .env。
  • 暴露变量： 只有以 VITE_ 为前缀的自定义变量会被暴露到 import.meta.env 对象上，以避免意外暴露敏感信息。例如，在 .env 中定义 VITE_API_URL=http://api.example.com，然后在代码中通过 import.meta.env.VITE_API_URL 访问。
  • HTML 中的环境变量： 可以通过类似 <title>%VITE_APP_TITLE%</title> 的方式在 index.html 中使用环境变量（仅限以 VITE_ 开头的变量）。

6. Vite 配置文件 (vite.config.js/vite.config.ts)

虽然 Vite 提供了合理的默认配置，但在需要定制时，可以在项目根目录创建 vite.config.js 或 vite.config.ts 文件。这是一个标准的 ESM 模块，导出一个配置对象：

“`javascript
// vite.config.js
import { defineConfig } from ‘vite’;
import vue from ‘@vitejs/plugin-vue’;

export default defineConfig({
plugins: [vue()], // 添加你需要的插件
// 其他配置选项…
resolve: {
alias: {
‘@’: ‘/src’, // 配置路径别名
},
},
server: {
port: 8080, // 修改开发服务器端口
open: true, // 服务器启动时自动打开浏览器
},
build: {
outDir: ‘build’, // 修改生产构建输出目录
sourcemap: true, // 生成 Source Map
},
});
“`

常用的配置选项包括：

  • plugins: 配置使用的 Vite 插件数组。
  • root: 项目根目录路径。
  • base: 部署时的公共基础路径，例如 /my-app/。
  • define: 全局常量替换。
  • resolve.alias: 配置模块路径别名，简化导入路径。
  • css: CSS 相关的配置（如 CSS Modules 的生成类名规则）。
  • server: 开发服务器配置（端口、代理、HMR 选项等）。
  • build: 生产构建配置（输出目录、压缩选项、代码分割策略等）。
  • optimizeDeps: 控制依赖预构建的行为。
  • ssr: 服务端渲染相关配置。

7. 插件系统

Vite 设计了一个精简高效的插件 API，基于 Rollup 插件标准进行扩展。这使得社区可以开发各种插件来扩展 Vite 的功能，例如：

  • 框架集成 (如 @vitejs/plugin-vue)
  • 特定文件格式支持 (如 @vitejs/plugin-xml)
  • 特定工具集成 (如 vite-plugin-eslint, vite-plugin-stylelint)
  • 功能增强 (如 vite-plugin-pwa 生成 PWA manifest 和 Service Worker)

插件是实现复杂需求和与特定工具链集成的关键。在 vite.config.js 中引入并使用插件即可。

第五部分：Vite 与 Webpack 的简要对比

特性 Vite Webpack
开发服务器 基于原生 ESM，按需编译 先打包整个应用，再提供服务
启动时间 极快（毫秒/秒级） 慢（可能需要几十秒甚至分钟级）
HMR 速度 极快（毫秒级），精确更新 相对慢，尤其大型项目或非 JS 资源更新
依赖处理 使用 Esbuild 预构建第三方依赖 使用各种 Loader 处理所有模块并打包
构建工具 生产环境使用 Rollup 生产环境通常也使用 Webpack（通过 Plugin/Loader）
配置复杂度 开箱即用，配置文件简洁 (vite.config.js) 复杂，概念多 (Loader, Plugin, etc.)
技术栈 拥抱原生 ESM 和最新 Web 标准 成熟稳定，生态庞大，兼容性强
文件处理 利用浏览器能力处理大部分文件（如图片） 需要 Loader 处理各种文件类型

Vite 在开发体验（速度和配置）上具有显著优势，代表了未来构建工具的发展方向。Webpack 依然强大，拥有庞大的生态和处理复杂边缘场景的能力，但在启动和 HMR 速度上通常不如 Vite。对于新项目或追求极致开发效率的团队，Vite 是一个非常有吸引力的选择。

第六部分：何时选择 Vite？

  • 新项目： 如果您正在启动一个新的前端项目，无论是使用 Vue、React、Svelte 还是 Vanilla JS/TS，Vite 都是一个极好的选择，能够提供最佳的开发体验。
  • 追求极致开发效率： 如果您对当前项目的启动和 HMR 速度感到不满，并且项目可以迁移到原生 ESM 的开发模式，Vite 值得尝试。
  • 使用主流框架： Vite 对主流框架提供了官方和社区的强大支持，集成度高。
  • 喜欢简洁的配置： 如果您厌倦了复杂的 Webpack 配置，Vite 的开箱即用和简洁配置会让您耳目一新。

第七部分：进一步探索

本文只是 Vite 的入门指南，Vite 还有更多强大的功能和特性等待您探索：

  • 服务 Side Rendering (SSR): Vite 对 SSR 提供了实验性支持，可以与 Vue 3、React 等框架结合实现 SSR。
  • 库模式 (Library Mode): Vite 可以用来构建前端库，生成不同模块格式（ESM, UMD）的构建产物。
  • 插件开发： 如果您有特殊需求，可以学习 Vite 的插件 API 开发自己的 Vite 插件。
  • 高级配置： 深入了解 vite.config.js 中的各种配置选项，以满足更复杂的项目需求。
  • 依赖预构建的详细配置： 了解 optimizeDeps 选项，处理特定库的预构建问题。

推荐查阅 Vite 官方文档（https://cn.vitejs.dev/）获取最全面、最新的信息。

总结

Vite 作为一款现代化的前端构建工具，凭借其利用原生 ES Modules、Esbuild 的闪电般速度以及 Rollup 的高效构建能力，极大地提升了前端开发体验。告别漫长的等待和繁琐的配置，Vite 让开发者能够更专注于代码本身，享受即时反馈带来的畅快淋漓。

如果您还没有尝试过 Vite，强烈建议您现在就开始，创建一个新的 Vite 项目，亲自感受它带来的速度与便捷。Vite 不仅仅是一个工具，它代表了前端构建领域的一种新范式，正快速成为现代前端开发的标准配置。掌握 Vite，将让您在前端开发的道路上如虎添翼。

祝您在使用 Vite 的旅程中一切顺利，享受现代前端开发的极致体验！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部