开始 ​

总览 ​

Vite（法语意为 "快速的"，发音 /vit/ ，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能 ，如速度快到惊人的 模块热替换（HMR） 。

• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 是一种具有明确建议的工具，具备合理的默认设置。您可以在 功能指南 中了解 Vite 的各种可能性。通过 插件 ，Vite 支持与其他框架或工具的集成。如有需要，您可以通过 配置部分 自定义适应你的项目。

Vite 还提供了强大的扩展性，可通过其 插件 API 和 JavaScript API 进行扩展，并提供完整的类型支持。

你可以在 为什么选 Vite 部分深入了解该项目的设计理念。

浏览器支持 ​

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

对于生产环境构建，Vite 默认以 Baseline 广泛可用的浏览器为目标平台。这些浏览器至少发布于两年半之前。您可以通过配置降低目标浏览器版本。此外，可以通过官方 @vitejs/plugin-legacy 支持旧版浏览器。更多详情，请参阅 构建生产环境 部分。

在线试用 Vite ​

你可以通过 StackBlitz 在线试用 vite。它直接在浏览器中运行基于 Vite 的构建，因此它与本地开发几乎无差别，同时无需在你的机器上安装任何东西。你可以浏览 vite.new/{template} 来选择你要使用的框架。

目前支持的模板预设如下：

搭建第一个 Vite 项目 ​

$ npm create vite@latest

$ yarn create vite

$ pnpm create vite

$ bun create vite

$ deno init --npm vite

然后按照提示操作即可！

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

# npm 7+，需要添加额外的 --：
$ npm create vite@latest my-vue-app -- --template vue

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

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

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

$ 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 （即在项目 URL 的 github 后添加 .stackblitz ）。

你也可以用如 degit 之类的工具，使用社区模版来搭建项目。假设项目在 GitHub 上并使用 main 作为默认分支，可以使用以下命令创建本地副本：

npx




    
 degit user/project#main my-project
cd my-project
npm install
npm run dev

手动安装 ​

在你的项目中，可以用以下方法来安装 vite 命令行工具：

$ npm install -D vite

$ yarn add -D vite

$ pnpm add -D vite

$ bun add -D vite

$ deno add -D npm:vite

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

<p>Hello Vite!</p>

然后在终端上运行相应的命令:

$ npx vite

$ yarn vite

$ pnpm vite

$ bunx vite

$ deno run -A npm:vite

之后就可以在 http://localhost:5173 上访问 index.html 。

index.html 与项目根目录 ​

你可能已经注意到，在一个 Vite 项目中， index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 <script type="module" src="..."> ，这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 <script type="module"> 和引用 CSS 的 <link href> 也能利用 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 scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：

{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
}

可以指定额外的命令行选项，如 --port 或 --open 。运行 npx vite --help 获得完整的命令行选项列表。

查看 命令行接口 了解更多细节。

使用未发布的功能 ​

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

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

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

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

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

将 SHA 替换为 Vite 的提交 SHA 。请注意，仅最近一个月的提交有效，旧版本提交的构建产物会被清除。

或者，你可以克隆 Vite 代码仓库 到本地，自行构建并建立软链接（需安装 pnpm ）：

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite