只需 5 分钟即可部署您的第一个 Vite React 项目

介绍

希望你喜欢阅读我的初学者文章—— “了解 Vite Js 的基础知识以及为什么要在项目中使用它。” 如果没有，我假设你已经对 Vite 有一个扎实的掌握。您现在一定很高兴尝试这个新的 Webpack，这是最新的技术改进。

在本文中，我们将在我们的 React Js 项目中介绍一个非常流行的构建工具，称为 Vite。

为什么选择维特？

Vite 是一个构建工具，旨在 加快现代 Web 项目的学习者开发。 众所周知，创建一个 React 项目需要一些时间，并且会减慢开发过程。但：-

• 快的 支持极快的热模块更换 (HMR) 运行您的项目，Vite 将使您的项目比平时快得多。
• 还 允许我们选择什么框架 我们想和它一起工作。

让我们看看如何使用 Vite 创建下一代项目。

开始你的第一个 Vite 项目：脚手架

所以要创建一个Vite应用程序。打开您的代码编辑器（Visual Studio）并在其中打开一个新终端并说：

使用 NPM：

 $ npm 创建 [[email protected]](/cdn-cgi/l/email-protection)

用纱线：

 $纱创建vite

键入您的项目名称。按回车键默认名称为 vite-项目

选择框架——React

选择一个变体——反应

 $ cd vite-项目  
 $ npm 安装  
 $ npm 运行开发

您的项目当前在 localhost:3000 处于活动状态。

注意事项

• 你可能已经注意到，在一个 Vite 项目中， index.html 清楚地显示 而不是被置于公众之中。这是 故意做的 ;在开发您的应用程序时， Vite 充当服务器，您的入口点是 index.html。
• Index.html 作为源代码处理，是 Vite 模块图的一部分。它解决了 <script type="module" src="...">
• 排队 <script type="module"> 和通过引用的 CSS也可以从 Vite 特有的功能中受益。也不需要特殊的%PUBLIC URL% 占位符，因为 index.html 内的 URL 会自动重新定位。

结论

您可以像使用标准静态文件服务器一样编写代码（只是功能更强大！），因为源代码中的静态 URL 将使用项目根目录作为基础进行解析。 Vite 可以用于基于单存储库的架构中，因为 Vite 可以处理解析到根文件系统之外的位置的依赖项。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/11100/54340209