Vite 现在成为 Laravel应用 默认的前端资源打包器

Laravel团队一直在努力为Laravel整合Vite。截至本周，Vite现在是Laravel新项目的默认前端资源打包器，同时更新了Breeze和Jetstream：

今天，我们兴奋地宣布，Laravel的新项目使用Vite捆绑前端资产。Breeze和Jetstream也更新了？

 

使用带有Inertia Vue或React的新型Breeze/Vite堆叠时，体验闪电般快速的热模块更换。⚡

— Taylor Otwell ? (@taylorotwell) June 28, 2022

Taylor Otwell分享了在新项目中试用Vite的最快方法，如果你想了解Vite

打包资源的速度：

laravel new breeze-test --git
cd breeze-test
composer require laravel/breeze
php artisan breeze:install vue
npm install
npm run dev

使用Laravel Breeze是开始使用Vite的推荐方法，因为它提供了前端和后端身份验证脚手架以及Tailwind、Inertia和Vite等工具。

运行上面的代码，Vite开始构建开发资源并在终端前台等待更新：

vite 2.9.13
> Local: http://localhost:3000
> Network: use `--host` to expose

ready in 327ms

Laravel v9.19.0

> APP_URL: http://breeze-test.test

现在的主布局文件 app.blade.php 中有一个 @vite 指令，并且在开发期渲染有下面的HTML 内容：

<script type="module" src="http://127.0.0.1:3000/@vite/client"></script>
<script type="module" src="http://127.0.0.1:3000/resources/js/app.js"></script>

因为你对Vue 文件做了修改，你将会看到类似于下面的输出，说明编译已更新。

19:41:12 PM [vite] hmr update /resources/js/Pages/Auth/Login.vue
hmr update /resources/css/app.css (x4)

HMR的输出是“热模块更换”，它在开发过程中提供近乎即时的构建时间。这些更新速度如此之快，一开始我简直不敢相信，这有助于你在进行前端更改时进入高效流程。当你工作时，你会看到浏览器自动更新，这是一种奇妙的体验！

除了Vite更新外，Laravel文档还有一个前端文档页面，为您提供Laravel应用程序所有前端选项的完整概述。

让Vite成为默认前端编译器的是一项巨大的成就，也是推动Laravel前进的一步。祝贺所有相关人员！