学习Laravel的Vite-plugin包

Laravel团队更新了第一方Laravel的Vite-plugin包，支持在刀片/任意文件变化时进行全页面重载。当你编辑的刀片模板(或任何其他你配置的文件)发生变化时，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

<head/> 一旦项目安装完毕, 在resources/views/ 中找到的welcome.blade.php 文件的某处添加以下内容:

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

接下来, 你要安装NPM的依赖性并运行dev命令:

npm install
npm run dev

就这样了!如果你对刀片文件或路由做了修改，你会在控制台中看到类似下面的内容。

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