知海

快速开始

vite-main开始与简介

快速开始

概览

Vite（法语中“快速”的意思，发音为 /viːt/，同“veet”）是一款构建工具，旨在为现代 Web 项目提供更快、更精简的开发体验。它由两个主要部分组成：

Vite 具有鲜明的观点，并且开箱即用提供合理的默认配置。请阅读功能指南了解具体能力。通过插件可以支持各种框架或与其他工具集成。配置章节说明了如何根据你的项目需要调整 Vite。

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

你可以在为什么选择 Vite 部分了解项目背后的更多设计理念。

通过 Scrimba 上的交互式教程学习 Vite

浏览器支持

在开发过程中，Vite 假设使用的是现代浏览器。这意味着浏览器支持大多数最新的 JavaScript 和 CSS 特性。因此，Vite 将 esnext 作为转换目标。这样可以避免语法降级，让 Vite 尽可能接近原始源代码地提供模块。Vite 会注入一些运行时代码以使开发服务器正常工作。这些代码使用的内容包含在每次主要版本发布时的 Baseline Newly Available 特性中（本次主要版本对应 2026-01-01）。

对于生产构建，Vite 默认以 Baseline Widely Available 的浏览器版本为目标，该版本对应于每个主要版本固定的日期。对于本主要版本，这对应于约 2023 年年中发布的浏览器版本。可以通过配置降低目标版本。此外，还可以通过官方 @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 项目

code-group

bash 复制代码 
$ npm create vite@latest
bash 复制代码 
$ yarn create vite
bash 复制代码 
$ pnpm create vite
bash 复制代码 
$ bun create vite
bash 复制代码 
$ deno init --npm vite

然后按照提示操作！

在 Scrimba 上观看交互式课程

::: tip 兼容性说明
Vite 需要 Node.js 版本 20.19+、22.12+。但某些模板需要更高的 Node.js 版本才能正常工作，如果你的包管理器提示版本问题，请升级。

:::: details 使用命令行选项运行 create vite

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

bash 复制代码 
# npm 7+，需要额外的双横线：
$ 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-compiler、react-ts、react-compiler-ts、preact、preact-ts、lit、lit-ts、svelte、svelte-ts、solid、solid-ts、qwik、qwik-ts。

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

要创建无需交互式提示的项目，可以使用 --no-interactive 标志。:

社区模板

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

对于位于 https://github.com/user/project 的模板，你可以使用 https://github.stackblitz.com/user/project 在线试用（在 URL 中的 github 后面添加 .stackblitz）。

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

bash 复制代码 
npx tiged user/project my-project
cd my-project

npm install
npm run dev

手动安装

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

code-group

bash 复制代码 
$ npm install -D vite
bash 复制代码 
$ yarn add -D vite
bash 复制代码 
$ pnpm add -D vite
bash 复制代码 
$ bun add -D vite
bash 复制代码 
$ deno add -D npm:vite

然后创建一个如下的 index.html 文件：

html 复制代码 
<p>Hello Vite!</p>

接着在终端运行相应的 CLI 命令：

code-group

bash 复制代码 
$ npx vite
bash 复制代码 
$ yarn vite
bash 复制代码 
$ pnpm vite
bash 复制代码 
$ bunx vite
bash 复制代码 
$ deno run -A npm:vite

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 脚本：

json [package.json] 复制代码 
{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`、`vite serve`
    "build": "vite build", // 构建生产版本
    "preview": "vite preview" // 本地预览生产构建
  }
}

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

了解更多关于命令行接口的信息。

使用未发布的提交

如果你等不及新版本发布以测试最新功能，你可以使用 https://pkg.pr.new 安装 Vite 的特定提交：

code-group

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 # 此步骤请使用你喜欢的包管理器

然后进入你的基于 Vite 的项目并运行 pnpm link vite（或你用于全局链接 vite 的包管理器）。现在重启开发服务器，体验最新功能吧！

要了解更多关于 Vite 发布方式及时间的信息，请参阅发布文档。

::: tip 使用 Vite 的依赖
要替换依赖项间接使用的 Vite 版本，你应该使用 npm overrides 或 pnpm overrides。
:::

社区

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

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。