Laravel的vite-plugin包怎么使用

這篇文章主要介紹“Laravel的vite-plugin包怎么使用”，在日常操作中，相信很多人在Laravel的vite-plugin包怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Laravel的vite-plugin包怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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/**',
            ],
        }),
    ],
});

試試看

讓我們設置一個演示 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

到此，關于“Laravel的vite-plugin包怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！