Vite 现已成为 Laravel 应用程序的默认前端资产捆绑器

Laravel 团队一直在努力为 Laravel 集成 Vite。在本周，Vite 现在是新 Laravel 项目中的默认前端资产捆绑器，并且更新了 Breeze 和 Jetstream。

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

使用新的 Breeze / Vite 堆栈与 Inertia Vue 或 React 时，体验闪电般的快速热模块替换。⚡

— Taylor Otwell 🪐 (@taylorotwell) 2022 年 6 月 28 日

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 构建开发资产并在终端的前景中等待更改而结束。

主 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 文件时，您将看到类似于以下内容的输出，指示更新的构建。

9: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 向前发展的一步。祝贺所有参与其中的人！