Vite(法语为 fast,发音为/vit/)是一种构建工具,旨在为现代Web项目提供更快,更精简的开发体验。它包含两个主要部分:
Vite固执己见,并具有开箱即用的明智默认值,但通过其Plugin API和JavaScript API具有完全键入支持,它也可以高度扩展。
兼容性问题
Vite需要Node.js版本> = 12.0.0。
npm init @vitejs/app
yarn create @vitejs/app
然后按照提示进行操作!
您还可以通过其他命令行选项直接指定项目名称和要使用的模板。例如,要搭建Vite + Vue项目,请运行:
# npm 6.x
npm init @vitejs/app my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-vue-app -- --template vue
# yarn
yarn create @vitejs/app my-vue-app --template vue
支持的模板预设包括:
您可能已经注意到的一件事是,在Vite项目中,index.html它处于中心位置而不是隐藏在内部public。这是故意的:在开发过程中,Vite是服务器,并且index.html是应用程序的入口点。
Vite视为index.html源代码和模块图的一部分。它解决<script type="module" src="...">了引用您的JavaScript源代码的问题。即使<script type="module">通过引用的内联和CSS<link href>也享受Vite特定的功能。此外,内部index.html的URL会自动重新设置基础,因此不需要特殊的%PUBLIC_URL%占位符。
与静态http服务器类似,Vite具有“根目录”的概念,从中可以从中提供文件。您会<root>在其他文档中看到它的引用。源代码中的绝对URL将使用项目根目录作为基础来解析,因此您可以像使用普通静态文件服务器一样(除非功能更强大!)来编写代码。Vite还能够处理解析为根目录以外的文件系统位置的依赖项,即使在基于Monorepo的设置中也可以使用。
运行vite时以当前工作目录为根目录启动开发服务器。您可以使用指定备用根vite serve some/sub/dir。
在安装了Vite的项目中,您可以vite在npm脚本中使用二进制文件,也可以直接通过运行它npx vite。这是脚手架Vite项目中的默认npm脚本:
{
"scripts": {
"dev": "vite", // start dev server
"build": "vite build", // build for production
"serve": "vite preview" // locally preview production build
}
}
您可以指定其他CLI选项,例如--port或--https。有关CLI选项的完整列表,请npx vite --help在您的项目中运行。
如果您迫不及待地需要一个新版本来测试最新功能,则需要将vite存储库克隆到本地计算机,然后自己构建并链接它(需要使用Yarn 1.x)
git clone https://github.com/vitejs/vite.git
cd vite
yarn
cd packages/vite
yarn build
yarn link
然后转到基于vite的项目并运行yarn link vite。现在,重新启动开发服务器(yarn dev)以顺其自然!