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/**

这种约定可能适合大多数项目，但是如果您想包含其他路径或文件，您可以配置 refresh 属性

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 依赖项并运行开发命令

npm install
npm run dev

就这样！如果您更改 blade 文件或路由，您将在控制台中看到类似以下内容

您所做的任何更改都应该立即反映出来，具体取决于您的本地开发环境设置。