本篇文章給大家分享一個Laravel擴展：vite-plugin 包，介紹一下如何在 Laravel Blade 中使用 Vite 來實現熱重載，希望對大家有所幫助！
Laravel 團隊更新了第一方 Laravel vite-plugin 包， 以支持blade 模板/任意文件更改時的全頁重新加載。當你編輯更改的 blade 模板（或你配置的任何其他文件）時，Vite 將重新加載整個頁面。開發過程中不再需要手動刷新瀏覽器！
安裝新的 Laravel 項目時，你的 vite.config.js 文件中的基本配置如下所示：
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js'
],
refresh: true,
}),
],
});上面的代碼片段是一個全新的 Laravel 應用程序附帶的；你不需要做任何事情來讓熱重載在一個新項目上工作。
注意 refresh 配置——當設置為 true 時，Laravel Vite 插件會在你更新以下路徑中的文件時刷新頁面：
routes/** resources/views/**
該約定可能適用于大多數項目，但如果你想包含其他路徑或文件，你可以配置刷新屬性：
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js'
],
refresh: [
'resources/routes/**',
'routes/**',
'resources/views/**',
],
}),
],
});有關配置選項的更多詳細信息，請參閱官方文檔中的 使用 Blade 模板和路由。
試試看
讓我們設置一個演示 Laravel 應用程序來演示熱重載。首先，讓我們創建一個新的演示項目：
laravel new blade-hot-reload --git cd blade-hot-reload
安裝項目后，將以下內容添加到 resources/views/ 中的welcome.blade.php 文件的<head/> 中：
@vite('resources/js/app.js')接下來，你需要安裝 NPM 依賴項并運行 dev 命令：
npm install npm run dev
就是這樣！如果你對 Blade 文件或路由進行更改，你將在控制臺中看到類似以下內容：
你所做的任何更改都應立即反映，具體取決于你的本地開發環境設置。
原文地址：https://laravel-news.com/laravel-blade-hot-refresh-with-vite
譯文地址：https://learnku.com/laravel/t/69811
