Recommandation d'extension Laravel : le package vite-plugin utilise Vite pour implémenter le rechargement à chaud

Cet article partagera avec vous une extension Laravel : le package vite-plugin. Il présentera comment utiliser Vite dans Laravel Blade pour implémenter le rechargement à chaud. J'espère que cela sera utile à tout le monde !

L'équipe Laravel a mis à jour le package propriétaire Laravel vite-plugin pour prendre en charge le rechargement d'une page complète lorsque les modèles de lames/fichiers arbitraires changent. Lorsque vous modifiez un modèle de lame modifié (ou tout autre fichier que vous configurez), Vite rechargera la page entière. Fini les actualisations manuelles du navigateur pendant le développement !

Lors de l'installation d'un nouveau projet Laravel, la configuration de base dans votre fichier vite.config.js ressemble à ceci : 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')

L'extrait de code ci-dessus est livré avec une toute nouvelle application Laravel ; Je n'ai pas besoin de faire quoi que ce soit pour recharger à chaud et travailler sur un nouveau projet.

Notez la configuration refresh - lorsqu'il est défini sur true, le plugin Laravel Vite actualisera la page lorsque vous mettrez à jour un fichier dans le chemin suivant :

npm install
npm run dev

Cette convention peut s'applique à la plupart des projets, mais si vous souhaitez inclure d'autres chemins ou fichiers, vous pouvez configurer les propriétés d'actualisation :

rrreeePour plus de détails sur les options de configuration, consultez la documentation officielle Utilisez les modèles Blade et le routage

.

Essayez-le

Créons une application de démonstration Laravel pour démontrer le rechargement à chaud. Tout d'abord, créons un nouveau projet de démonstration :

rrreee
Après avoir installé le projet, ajoutez le contenu suivant au fichier welcome.blade.php dans resources/views/ Dans <head/> : rrreeeEnsuite, vous devez installer les dépendances NPM et exécuter la commande dev :

rrreee

---

C'est tout ! Si vous apportez des modifications aux fichiers ou aux routes Blade, vous verrez quelque chose de similaire à ce qui suit dans la console :

Toute modification que vous apportez doit être reflétée immédiatement, en fonction des paramètres de votre environnement de développement local.

Toutes les traductions de cet article sont uniquement destinées à des fins d'apprentissage et de communication. Veuillez vous assurer d'indiquer le traducteur, la source et le lien vers cet article lors de la réimpression . Notre travail de traduction est conforme à l'

Accord CC

Si notre travail porte atteinte à vos droits, veuillez nous contacter à temps. 🎜🎜🎜🎜Adresse originale : 🎜https://laravel-news.com/laravel-blade-h... 🎜🎜🎜Adresse de traduction : 🎜https://learnku.com/laravel/t/69811🎜🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!