Laravel擴充推薦：vite-plugin套件利用 Vite 實現熱重載

這篇文章跟大家分享一個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 檔案或路由進行更改，你將在控制台中看到類似以下內容：

#你所做的任何更改都應立即反映，這取決於你的本機開發環境設定。

本文中的所有譯本僅用於學習和交流目的，轉載請務必註明文章譯者、出處、和本文連結
                               我們的翻譯中遵循 CC 協定時，如果我們的工作侵犯於您的權益，請及時聯絡我們。

---

原文網址：https://laravel-news.com/laravel-blade-h...

翻譯網址：https://learnku.com/laravel/t/69811

以上是Laravel擴充推薦：vite-plugin套件利用 Vite 實現熱重載的詳細內容。更多資訊請關注PHP中文網其他相關文章！