入门
概述
vite（“快速”的法语单词，发音为/vit/ ，例如“ Veet”）是一种构建工具，旨在为现代网络项目提供更快，更精美的开发体验。它由两个主要部分组成:
提供与本机ES模块相比，提供丰富功能增强功能的开发服务器，例如极快的热模块更换（HMR） 。
将您的代码与汇总捆绑在一起的构建命令，并预先配置，以输出高度优化的静态资产进行生产。
Vite是自以为是的，并带有明智的默认设置。阅读功能指南中的可能性。通过插件可以支持框架或与其他工具集成。 “配置”部分说明了如何在需要的情况下将Vite适应您的项目。
Vite也可以通过其插件API和JavaScript API高度扩展，并具有完整的打字支持。
您可以在“ Why Vite”部分中了解有关该项目背后的基本原理的更多信息。
浏览器支持
在开发过程中，Vite将esnext设置为转换目标，因为我们假设使用了现代浏览器，并且它支持所有最新的JavaScript和CSS功能。这样可以防止语法降低，让Vite服务模块尽可能接近原始源代码。
For the production build, by default Vite targets browsers that support modern JavaScript, such as native ES Modules, native ESM dynamic import, import.meta, nullish coalescing, and BigInt. Legacy browsers can be supported via the official @vitejs/plugin-legacy. See the Building for Production section for more details.
在线尝试VITE
您可以在Stackblitz上在线尝试VITE。它直接在浏览器中运行基于Vite的构建设置，因此它几乎与本地设置相同，但不需要在计算机上安装任何内容。您可以导航到vite.new/{template}以选择要使用的框架。
支持的模板预设是:
| JavaScript | 打字稿 |
|---|---|
| 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项目
Compatibility Note
Vite需要Node.js版本18+或20+。但是，某些模板需要更高的node.js版本才能正常工作，如果您的软件包管理器警告它，请升级。
$ npm create vite@latest$ yarn create vite$ pnpm create vite$ bun create 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有关每个受支持的模板的更多详细信息preact-ts请参见创建: vanilla lit react-swc react-ts react-swc-ts preact b， lit-ts ， svelte ， vanilla-ts vue react vue-ts solid ， solid-ts qwik qwik-ts svelte-ts
您可以将.用于项目名称进行当前目录中的脚手架。
社区模板
Create-Vite是一种工具，可以快速从基本模板开始用于流行框架的项目。查看包括其他工具或针对不同框架的社区维护模板的真棒Vite。
对于https://github.com/user/project处的模板，您可以使用https://github.stackblitz.com/user/project在线尝试（在项目的URL github后添加.stackblitz ）。
您还可以使用Degit等工具用其中一个模板来脚克式项目。假设该项目在GitHub上并使用main作为默认分支，则可以使用以下方式创建本地副本:
npx degit user/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并创建一个这样的index.html文件:
<p>Hello Vite!</p>然后在您的终端中运行适当的CLI命令:
$ npx vite$ yarn vite$ pnpm vite$ bunx viteindex.html将在http://localhost:5173上提供。
index.html和项目根
您可能注意到的一件事是，在一个Vite项目中， index.html是前中央和中央，而不是被藏在public中。这是有意的:开发期间Vite是服务器，而index.html是您应用程序的切入点。
Vite将index.html视为源代码和模块图的一部分。它解决了<script id="!">引用您的JavaScript源代码的1。即使通过<link id="$">引用的内联<script id="#">和CSS也享受特定于Vite的功能。此外， index.html内部的URL会自动重新固定，因此不需要%PUBLIC_URL%占位符。
与静态HTTP服务器类似，Vite具有您文件提供的“根目录”的概念。您将在其余文档中看到它被称为<root> 。源代码中的绝对URL将使用项目根作为基础解决，因此您可以像使用普通的静态文件服务器一样编写代码（除了更强大的方式！）。 Vite还能够处理依赖性的依赖项，这些依赖项可以解决根外文件系统位置，这即使在基于MonorePo的设置中也可以使用。
Vite还支持具有多个.html入口点的多页应用程序。
指定替代根
运行vite使用当前工作目录作为root启动DEV服务器。您可以用vite serve some/sub/dir指定替代根。 请注意，VITE还将在项目根中解决其配置文件（IE vite.config.js ） ，因此，如果更改了根，则需要移动它。
命令行接口
在安装Vite的项目中，您可以在NPM脚本中使用vite二进制文件，也可以使用npx vite直接运行。这是一个脚手架Vite项目中的默认NPM脚本:
{
"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的特定提交:
$ 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用Vite的任何提交SHA替换SHA 。请注意，只有在上个月内提交，随着较旧的提交版本被清除。
另外，您也可以将Vite Repo克隆到本地计算机，然后自己构建和链接它（需要PNPM ）:
git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # 在此步骤中使用您首选的软件包管理器然后转到您的基于Vite的项目并运行pnpm link --global vite （或您用来在全球链接vite软件包管理器）。现在，重新启动开发服务器以在出血边缘上行驶！