快速上手

概述

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

• 一个开发服务器，它在原生 ES 模块的基础上提供了丰富的功能增强，例如极快的热模块替换 (HMR)。

• 一个构建命令，它使用Rollup捆绑你的代码，并预先配置为输出高度优化的静态资源以用于生产环境。

Vite 有自己的观点，并且开箱即用地提供了合理的默认值。阅读特性指南了解有哪些可能性。可以通过插件支持框架或与其他工具集成。如果需要，配置部分说明了如何使 Vite 适应你的项目。

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

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

浏览器支持

在开发过程中，Vite 将esnext 作为转换目标，因为我们假设使用了现代浏览器，并且它支持所有最新的 JavaScript 和 CSS 功能。这可以防止语法降低，让 Vite 尽可能地以原始源代码的形式提供模块。

对于生产环境构建，默认情况下，Vite 针对支持原生 ES 模块、原生 ESM 动态导入和import.meta的浏览器。可以通过官方的@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 18+ 或 20+ 版本。但是，某些模板需要更高版本的 Node.js 才能工作，如果你的包管理器发出警告，请升级。

npm

$ npm create vite@latest

Yarn

$ yarn create vite

pnpm

$ pnpm create vite

Bun

$ bun create vite

然后按照提示操作！

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

npm

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

Yarn

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

pnpm

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

Bun

$ bun create 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 CLI

npm

$ npm install -D vite

Yarn

$ yarn add -D vite

pnpm

$ pnpm add -D vite

Bun

$ bun add -D vite

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

<p>Hello Vite!</p>

然后在你的终端中运行相应的 CLI 命令

npm

$ npx vite

Yarn

$ yarn vite

pnpm

$ pnpm vite

Bun

$ bunx 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 还能够处理解析到根目录外文件系统位置的依赖项，这使得它即使在基于单仓库的设置中也能使用。

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

指定备用根目录

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

命令行界面

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

package.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。

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

使用未发布的提交

如果你无法等待新版本以测试最新功能，则需要将vite 仓库克隆到你的本地机器，然后自行构建并链接它（需要pnpm）

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 的包管理器）。现在重新启动开发服务器以体验最新功能！

社区

如果你有任何疑问或需要帮助，请在Discord和GitHub 讨论中联系社区。