搜尋
首頁php框架LaravelLaravel擴充推薦:vite-plugin套件利用 Vite 實現熱重載

這篇文章跟大家分享一個Laravel擴充:vite-plugin 包,介紹如何在 Laravel Blade 中使用 Vite 來實現熱重載,希望對大家有所幫助!

Laravel擴充推薦:vite-plugin套件利用 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檔案的 中:

@vite('resources/js/app.js')

接下來,你需要安裝NPM 依賴項並執行dev 指令:

npm install
npm run dev

就是這樣!如果你對Blade 檔案或路由進行更改,你將在控制台中看到類似以下內容:

Vite page reload console output

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

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

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

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

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

陳述
本文轉載於:learnku。如有侵權,請聯絡admin@php.cn刪除
使用Laravel:使用PHP簡化Web開發使用Laravel:使用PHP簡化Web開發Apr 19, 2025 am 12:18 AM

Laravel優化Web開發流程的方法包括:1.使用路由系統管理URL結構;2.利用Blade模板引擎簡化視圖開發;3.通過隊列處理耗時任務;4.使用EloquentORM簡化數據庫操作;5.遵循最佳實踐提高代碼質量和可維護性。

Laravel:PHP Web框架的簡介Laravel:PHP Web框架的簡介Apr 19, 2025 am 12:15 AM

Laravel是一個現代化的PHP框架,提供了強大的工具集,簡化了開發流程並提高了代碼的可維護性和可擴展性。 1)EloquentORM簡化數據庫操作;2)Blade模板引擎使前端開發直觀;3)Artisan命令行工具提升開發效率;4)性能優化包括使用EagerLoading、緩存機制、遵循MVC架構、隊列處理和編寫測試用例。

Laravel:MVC建築和最佳實踐Laravel:MVC建築和最佳實踐Apr 19, 2025 am 12:13 AM

Laravel的MVC架構通過模型、視圖、控制器分離數據邏輯、展示和業務處理,提高了代碼的結構化和可維護性。 1)模型處理數據,2)視圖負責展示,3)控制器處理用戶輸入和業務邏輯,這種架構讓開發者專注於業務邏輯,避免陷入代碼泥潭。

Laravel:解釋的主要功能和優勢Laravel:解釋的主要功能和優勢Apr 19, 2025 am 12:12 AM

Laravel是一個基於MVC架構的PHP框架,具有簡潔的語法、強大的命令行工具、便捷的數據操作和靈活的模板引擎。 1.優雅的語法和易用的API使開發快速上手。 2.Artisan命令行工具簡化了代碼生成和數據庫管理。 3.EloquentORM讓數據操作直觀簡單。 4.Blade模板引擎支持高級視圖邏輯。

用Laravel建造後端:指南用Laravel建造後端:指南Apr 19, 2025 am 12:02 AM

Laravel適合構建後端服務,因為它提供了優雅的語法、豐富的功能和強大的社區支持。 1)Laravel基於MVC架構,簡化了開發流程。 2)它包含EloquentORM,優化了數據庫操作。 3)Laravel的生態系統提供瞭如Artisan、Blade和路由系統等工具,提升開發效率。

laravel框架技巧分享laravel框架技巧分享Apr 18, 2025 pm 01:12 PM

在這個技術不斷進步的時代,掌握先進的框架對於現代程序員至關重要。本文將通過分享 Laravel 框架中鮮為人知的技巧,幫助你提升開發技能。 Laravel 以其優雅的語法和廣泛的功能而聞名,本文將深入探討其強大的特性,提供實用技巧和竅門,幫助你打造高效且維護性高的 Web 應用程序。

laravel和thinkphp的區別laravel和thinkphp的區別Apr 18, 2025 pm 01:09 PM

Laravel 和 ThinkPHP 都是流行的 PHP 框架,在開發中各有優缺點。本文將深入比較這兩者,重點介紹它們的架構、特性和性能差異,以幫助開發者根據其特定項目需求做出明智的選擇。

laravel用戶登錄功能一覽laravel用戶登錄功能一覽Apr 18, 2025 pm 01:06 PM

在 Laravel 中構建用戶登錄功能是一個至關重要的任務,本文將提供一個全面的概述,涵蓋從用戶註冊到登錄驗證的每個關鍵步驟。我們將深入探討 Laravel 的內置驗證功能的強大功能,並指導您自定義和擴展登錄過程以滿足特定需求。通過遵循這些一步一步的說明,您可以創建安全可靠的登錄系統,為您的 Laravel 應用程序的用戶提供無縫的訪問體驗。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)