Empfehlung zur Laravel-Erweiterung: Das Vite-Plugin-Paket verwendet Vite, um das Hot-Reloading zu implementieren

Dieser Artikel stellt Ihnen eine Laravel-Erweiterung vor: das Vite-Plugin-Paket. Es wird Ihnen vorstellen, wie Sie Vite in Laravel Blade verwenden, um das Hot-Reloading zu implementieren.

Das Laravel-Team hat das Laravel-Erstanbieterpaket vite-plugin aktualisiert, um das Neuladen ganzer Seiten zu unterstützen, wenn sich Blade-Vorlagen/beliebige Dateien ändern. Wenn Sie eine geänderte Blade-Vorlage (oder eine andere von Ihnen konfigurierte Datei) bearbeiten, lädt Vite die gesamte Seite neu. Keine manuellen Browseraktualisierungen mehr während der Entwicklung!

Bei der Installation eines neuen Laravel-Projekts sieht die Grundkonfiguration in Ihrer vite.config.js-Datei so aus: 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')

Der obige Codeausschnitt enthält eine brandneue Laravel-Anwendung. Sie müssen nichts tun, damit Hot Reload an einem neuen Projekt funktioniert.

Beachten Sie die refresh-Konfiguration – wenn sie auf true gesetzt ist, aktualisiert das Laravel Vite-Plugin die Seite, wenn Sie eine Datei im folgenden Pfad aktualisieren:

npm install
npm run dev

Diese Konvention kann gelten für die meisten Projekte, aber wenn Sie andere Pfade oder Dateien einbeziehen möchten, können Sie die Aktualisierungseigenschaften konfigurieren:

rrreeeWeitere Einzelheiten zu den Konfigurationsoptionen finden Sie in der offiziellen Dokumentation Blade-Vorlagen und Routing verwenden

.

Probieren Sie es aus

Lassen Sie uns eine Demo-Laravel-Anwendung einrichten, um das Hot-Reloading zu demonstrieren. Erstellen wir zunächst ein neues Demo-Projekt:

rrreee
Fügen Sie nach der Installation des Projekts den folgenden Inhalt zur Datei welcome.blade.php in resources/views/ <head/> In: rrreee Als nächstes müssen Sie die NPM-Abhängigkeiten installieren und den Dev-Befehl ausführen:

rrreee

---

Das ist es! Wenn Sie Änderungen an Blade-Dateien oder -Routen vornehmen, sehen Sie in der Konsole etwas Ähnliches wie das Folgende:

Alle von Ihnen vorgenommenen Änderungen sollten abhängig von den Einstellungen Ihrer lokalen Entwicklungsumgebung sofort wirksam werden.

Alle Übersetzungen in diesem Artikel dienen nur zu Lern- und Kommunikationszwecken. Bitte geben Sie beim Nachdruck unbedingt den Übersetzer, die Quelle und den Link zu diesem Artikel an Unsere Übersetzungsarbeit steht im Einklang mit der

CC-Vereinbarung

. Sollten unsere Arbeiten Ihre Rechte verletzen, kontaktieren Sie uns bitte rechtzeitig. 🎜🎜🎜🎜Originaladresse: 🎜https://laravel-news.com/laravel-blade-h... 🎜🎜🎜Übersetzungsadresse: 🎜https://learnku.com/laravel/t/69811🎜🎜🎜

Das obige ist der detaillierte Inhalt vonEmpfehlung zur Laravel-Erweiterung: Das Vite-Plugin-Paket verwendet Vite, um das Hot-Reloading zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!