Assurez-vous que Laravel 9 et PHP 8.0 sont utilisés, car Vite est pris en charge hors de la bo?te; mettre à niveau si sur une ancienne version. 2. Installez les plugins VITE et requis via NPM Installer ou ajoutez manuellement Vite et Laravel-vite-Plugin en cas de manque, ainsi que des plugins spécifiques au framework comme @ vitejs / plugin-react ou @ vitejs / plugin-vue. 3. Créez ou mettez à jour VITE.Config.js pour inclure le plugin Laravel avec des chemins d'entrée pour CSS et Points d'entrée JS et activer des fonctionnalités comme HMR. 4. Remplacez @Mix ou les balises d'actifs codées en dur dans les modèles de lame avec la directive @vite répertoriant les mêmes points d'entrée, permettant l'intégration automatique du serveur de développement et la résolution de chemin de production. 5. Mettez à jour les scripts Package.json pour inclure "Dev": "Vite", "build": "Vite Build" et "Preview": "Vite Preview" pour les opérations de workflow standard. 6. Exécuter NPM Run Dev pour démarrer le serveur de développement VITE avec HMR ou NPM Run build pour compiler les actifs optimisés vers le public / build /, où Laravel lit le manifeste pour une injection d'actifs corrects. 7. Configurer éventuellement la prise en charge de Framework (React / Vue) en installant des dépendances respectives, en mettant à jour la configuration avec le plugin approprié et en ajustant les extensions de fichiers et importe en conséquence. 8. Personnaliser les paramètres du serveur VITE comme l'h?te et le port dans la configuration ou via .env.local, en particulier pour les environnements Docker ou partagés en définissant l'h?te: '0.0.0.0' et ajuster les paramètres HMR. La directive @vite gère parfaitement les environnements de développement et de production, exploite les modules ES natifs et élimine le besoin de Laravel Mix, résultant en un processus de construction plus rapide et plus évolutif qui s'intègre en douceur aux flux de travail du frontage moderne.

La configuration de Vite dans un projet Laravel est simple, surtout si vous utilisez Laravel 9 ou version ultérieure, qui prend en charge Vite hors de la bo?te. Voici comment le faire correctement et commencer à utiliser des outils de frontend moderne avec votre application Laravel.

? 1. Vérifiez la version Laravel et PHP

Assurez-vous que vous utilisez Laravel 9 et PHP 8.0 . VITE a remplacé Laravel Mix à partir de Laravel 9, donc les versions plus anciennes devront être améliorées ou configurées manuellement.

Si vous êtes sur Laravel 8 ou plus t?t, envisagez de mettre à niveau ou d'installer VITE manuellement (non recommandé - mieux vaut améliorer le laravel).

? 2. Installer VITE via NPM

Exécutez cette commande dans votre racine de projet Laravel:

 Installation de NPM

Cela installe les dépendances par défaut, y compris vite , laravel-vite-plugin et @vitejs/plugin-react ou similaire, selon votre configuration.

Si Vite n'est pas installé (par exemple, dans les projets plus anciens), ajoutez-le:

 Installation du NPM - Save-dev Vite Laravel-vite-Plugin

Installez également le plugin requis pour votre framework Frontend (facultatif):

 # Pour réagir
Installation de NPM --Save-dev @ Vitejs / Plugin-REAT

# Pour Vue
Installation de NPM --Save-Dev @ Vitejs / Plugin-Vue

? 3. Configurez Vite avec le plugin Laravel

Créez un fichier vite.config.js dans la racine de votre projet (sinon déjà présent):

 // Vite.config.js
import {DefinConfig} de 'Vite';
Importer Laravel de ?Laravel-vite-Plugin?;

Exporter de défaut DefiConfig ({
    Plugins: [
        Laravel ({
            // spécifie vos points d'entrée
            Entrée: ['Resources / CSS / App.css', 'Resources / JS / App.js'],
            actualiser: vrai,
        }),
    ],
    // Facultatif: si vous utilisez React ou Vue
    // résoudre: {
    // alias: {
    // '@': '/ ressources / js',
    //},
    //},
});

Cela indique à VITE où se trouvent vos fichiers CSS et JS principaux.

? 4. Mettez à jour les modèles de lame pour utiliser @vite

Dans votre fichier de mise en page principal (par exemple, resources/views/layouts/app.blade.php ), remplacez tous les anciens appels de mix comme @mix ou balises de script codées en dur avec:

 @vite (['Resources / CSS / App.css', 'Resources / JS / App.js'])

Cette directive:

• Charge le serveur de développement VITE pendant npm run dev
• Sort les chemins de construction corrects en production
• Gère automatiquement le remplacement du module chaud (HMR)

? Il vous suffit de répertorier les points d'entrée - Vite résoudra le reste via les importations.

? 5. Mettre à jour le package.json scripts

Assurez-vous que votre package.json a les bons scripts:

 "scripts": {
    "Dev": "Vite",
    "Build": "Vite Build",
    "Aper?u": "Vite Aper?u"
}

Ou, si vous voulez la dénomination spécifique à Laravel:

 "scripts": {
    "Dev": "Vite",
    "Build": "Vite Build",
    "Server": "Vite Aper?u"
}

? 6. Démarrer le serveur de développement ou la construction pour la production

Pendant le développement:

 NPM Run Dev

Cela démarre le serveur de développement VITE (généralement sur http://localhost:5173 ) et active HMR.

Pour la construction de production:

 NPM Run Build

Cela compile et divise les actifs en public/build/ .

Laravel lit automatiquement le fichier manifeste généré par VITE ( public/build/.vite/manifest.json ) pour injecter des URL d'actifs corrects.

? 7. Facultatif: utilisez des alias ou des cadres

Réagir l'exemple

Installer le support React:

 NPM Install React React-Dom

Mettre à jour vite.config.js :

 Importer React à partir de '@ vitejs / plugin-react';

Exporter de défaut DefiConfig ({
    Plugins: [
        Laravel ({
            Entrée: ['Resources / js / app.jsx'],
            actualiser: vrai,
        }),
        réagir(),
    ],
});

Ensuite, utilisez les fichiers .jsx et importez réagir normalement.

Vue Exemple

 Importer Vue à partir de '@ vitejs / plugin-vue';

Exporter de défaut DefiConfig ({
    Plugins: [
        Laravel ({
            Entrée: ?Ressources / js / app.js?,
        }),
        vue ({
            modèle: {
                TransformAsseturls: {
                    base: null,
                    InclutAbsolute: False,
                },
            },
        }),
    ],
});

? 8. Gestion de l'environnement et de l'URL

Si vous avez besoin de personnaliser l'h?te ou le port de serveur Vite, créez une configuration Vite .env.local ou mise à jour:

 Exporter de défaut DefiConfig ({
    serveur: {
        H?te: ?localhost?,
        Port: 5173,
        hmr: {
            H?te: ?localhost?,
        },
    },
    Plugins: [...],
});

Pour les environnements partagés (comme Valet ou Docker), vous devrez peut-être définir host: '0.0.0.0' et ajuster hmr.host .

Notes finales

• La directive @vite lame est intelligente - elle fonctionne à la fois en développement et en production.
• Pas besoin d'exécuter php artisan serve aux c?tés de VITE, sauf si vous testez des itinéraires backend.
• Utilisez la syntaxe import / export dans votre JS - Vite prend en charge les modules ES nativement.
• N'oubliez pas de commettre des déploiements public/build/ dans la production (ou construire sur le déploiement).

C'est ?a! Vous avez maintenant un système de construction frontal moderne et rapide intégré à Laravel à l'aide de Vite. Il est plus rapide que WebPack, a un HMR instantané et est mieux évolué.

Fondamentalement: installer, configurer les points d'entrée, utiliser @vite et exécuter npm run dev .

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!