开始

概述

Vite（法语，意为“快速”，发音 /vit/，类似于 "veet"）是一个构建工具，旨在为现代 Web 项目提供更快、更精简的开发体验。它由两个主要部分组成

一个开发服务器，它提供比原生 ES 模块更丰富的功能增强，例如极快的热模块替换 (HMR)。
一个构建命令，它使用 Rollup 打包你的代码，预先配置为输出高度优化的生产环境静态资源。

Vite 是有主见的，并且开箱即用，具有合理的默认设置。阅读特性指南中可能的内容。通过插件可以支持框架或与其他工具集成。配置部分解释了如何在需要时调整 Vite 以适应你的项目。

Vite 还可以通过其插件 API和JavaScript API高度扩展，并提供完整的类型支持。

你可以在为什么选择 Vite部分了解更多关于该项目背后的原理。

浏览器支持

在开发过程中，Vite 假定使用现代浏览器。这意味着浏览器支持大多数最新的 JavaScript 和 CSS 特性。因此，Vite 设置 esnext 作为转换目标。这可以防止语法降级，让 Vite 尽可能接近原始源代码地提供模块。Vite 注入了一些运行时代码，以使开发服务器正常工作。这些代码使用了每个主要版本发布时（此主要版本的发布时间为 2025-05-01）Baseline 新推出的特性。

对于生产环境构建，Vite 默认面向 Baseline 广泛可用的浏览器。这些浏览器是至少 2.5 年前发布的浏览器。可以通过配置降低目标。此外，可以通过官方 @vitejs/plugin-legacy 支持旧版浏览器。有关更多详细信息，请参见生产环境构建部分。

在线尝试 Vite

你可以在 StackBlitz 上在线尝试 Vite。它直接在浏览器中运行基于 Vite 的构建设置，因此它几乎与本地设置相同，但不需要在你的机器上安装任何东西。你可以导航到 vite.new/{template} 来选择要使用的框架。

支持的模板预设是

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts
solid	solid-ts
qwik	qwik-ts

搭建你的第一个 Vite 项目

兼容性说明

Vite 需要 Node.js 版本 20.19+、22.12+。但是，某些模板需要更高的 Node.js 版本才能工作，如果你的包管理器发出警告，请升级。

然后按照提示操作！

你还可以通过额外的命令行选项直接指定项目名称和你想要使用的模板。例如，要搭建一个 Vite + Vue 项目，请运行

bash

# npm 7+, extra double-dash is needed:
$ npm create vite@latest my-vue-app -- --template vue

bash

$ yarn create vite my-vue-app --template vue

bash

$ pnpm create vite my-vue-app --template vue

bash

$ bun create vite my-vue-app --template vue

bash

$ deno init --npm vite my-vue-app --template vue

有关每个支持的模板的更多详细信息，请参见 create-vite：vanilla、vanilla-ts、vue、vue-ts、react、react-ts、react-swc、react-swc-ts、preact、preact-ts、lit、lit-ts、svelte、svelte-ts、solid、solid-ts、qwik、qwik-ts。

你可以使用 . 作为项目名称，以便在当前目录中搭建项目。

社区模板

create-vite 是一个工具，可以从流行的框架的基本模板快速启动项目。查看 Awesome Vite 以获取包含其他工具或面向不同框架的社区维护的模板。

对于 https://github.com/user/project 上的模板，你可以使用 https://github.stackblitz.com/user/project 在线试用它（将 .stackblitz 添加到项目的 URL 中的 github 之后）。

你还可以使用像 degit 这样的工具来使用其中一个模板搭建你的项目。假设该项目位于 GitHub 上，并使用 main 作为默认分支，你可以使用以下命令创建本地副本

bash

npx degit user/project#main my-project
cd my-project

npm install
npm run dev

手动安装

在你的项目中，你可以使用以下命令安装 vite CLI

并创建一个像这样的 index.html 文件

html

<p>Hello Vite!</p>

然后在你的终端中运行适当的 CLI 命令

index.html 将在 http://localhost:5173 上提供。

`index.html` 和项目根目录

你可能已经注意到的一件事是，在 Vite 项目中，index.html 位于前端和中心位置，而不是被藏在 public 内部。这是有意为之：在开发过程中，Vite 是一个服务器，而 index.html 是你的应用程序的入口点。

Vite 将 index.html 视为源代码和模块图的一部分。它解析引用你的 JavaScript 源代码的 <script type="module" src="...">。甚至内联 <script type="module"> 和通过 <link href> 引用的 CSS 也可以享受 Vite 特有的功能。此外，index.html 中的 URL 会自动重新设置基准，因此无需特殊的 %PUBLIC_URL% 占位符。

与静态 http 服务器类似，Vite 具有“根目录”的概念，你的文件从该目录提供。你将在文档的其余部分中看到它被称为 <root>。你的源代码中的绝对 URL 将使用项目根目录作为基础进行解析，因此你可以编写代码，就好像你正在使用普通的静态文件服务器一样（除了功能更强大！）。Vite 还能够处理解析为根目录外文件系统位置的依赖项，这使得它即使在基于 monorepo 的设置中也可以使用。

Vite 还支持具有多个 .html 入口点的多页面应用程序。

指定替代根目录

运行 vite 使用当前工作目录作为根目录启动开发服务器。你可以使用 vite serve some/sub/dir 指定替代根目录。请注意，Vite 还将解析项目根目录内的其配置文件（即 vite.config.js），因此如果根目录已更改，你需要移动它。

命令行界面

在安装了 Vite 的项目中，你可以在你的 npm 脚本中使用 vite 二进制文件，或者使用 npx vite 直接运行它。以下是脚手架 Vite 项目中的默认 npm 脚本

package.json

json

{
  "scripts": {
    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
    "build": "vite build", // build for production
    "preview": "vite preview" // locally preview production build
  }
}

你可以指定其他 CLI 选项，例如 --port 或 --open。有关 CLI 选项的完整列表，请在你的项目中运行 npx vite --help。

了解更多关于命令行界面的信息

使用未发布的提交

如果你迫不及待地想测试最新功能，你可以使用 https://pkg.pr.new 安装 Vite 的特定提交

npmYarnpnpmBun

bash

$ npm install -D https://pkg.pr.new/vite@SHA

bash

$ yarn add -D https://pkg.pr.new/vite@SHA

bash

$ pnpm add -D https://pkg.pr.new/vite@SHA

bash

$ bun add -D https://pkg.pr.new/vite@SHA

将 SHA 替换为 Vite 的任何提交 SHA。请注意，只有最近一个月的提交才有效，因为较旧的提交版本会被清除。

或者，你也可以将 vite 仓库克隆到你的本地计算机，然后自己构建并链接它（需要 pnpm）

bash

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # use your preferred package manager for this step

然后转到你基于 Vite 的项目并运行 pnpm link --global vite（或你用来全局链接 vite 的包管理器）。现在重新启动开发服务器，以便在最前沿运行！

使用 Vite 的依赖项

要传递地替换依赖项使用的 Vite 版本，你应该使用 npm overrides 或 pnpm overrides。

社区

如果你有任何问题或需要帮助，请通过 Discord 和 GitHub Discussions 联系社区。

开始 ​

概述 ​

浏览器支持 ​

在线尝试 Vite ​

搭建你的第一个 Vite 项目 ​

社区模板 ​

手动安装 ​

index.html 和项目根目录 ​

指定替代根目录 ​

命令行界面 ​

使用未发布的提交 ​

社区 ​

开始

概述

浏览器支持

在线尝试 Vite

搭建你的第一个 Vite 项目

社区模板

手动安装

`index.html` 和项目根目录

指定替代根目录

命令行界面

使用未发布的提交

社区