Pastikan Laravel 9 dan Php 8.0 digunakan, kerana Vite disokong keluar dari kotak; Naik taraf jika pada versi yang lebih lama. 2. Pasang vite dan plugin yang diperlukan melalui NPM Pasang atau menambah secara manual Vite dan Laravel-Vite-Plugin jika hilang, bersama-sama dengan plugin spesifik kerangka seperti @vitejs/plugin-react atau @vitejs/plugin-vue. 3. Buat atau kemas kini vite.config.js untuk memasukkan plugin Laravel dengan laluan input untuk titik entri CSS dan JS dan membolehkan ciri -ciri seperti HMR. 4. Ganti @Mix atau tag aset hardcoded dalam templat bilah dengan Arahan @Vite menyenaraikan titik kemasukan yang sama, yang membolehkan integrasi pelayan DEV automatik dan resolusi laluan pengeluaran. 5. Kemas kini Pakej.Json skrip untuk memasukkan "dev": "vite", "membina": "vite binaan", dan "pratonton": "pratonton vite" untuk operasi aliran kerja standard. 6. Jalankan NPM Run Dev untuk memulakan pelayan pembangunan Vite dengan HMR atau NPM Run membina untuk menyusun aset yang dioptimumkan ke awam/membina/, di mana Laravel membaca nyata untuk suntikan aset yang betul. 7. Secara pilihan mengkonfigurasi Rangka Kerja Sokongan (React/VUE) dengan memasang kebergantungan masing -masing, mengemas kini konfigurasi dengan plugin yang sesuai, dan menyesuaikan sambungan fail dan import dengan sewajarnya. 8. Sesuaikan tetapan pelayan Vite seperti hos dan port dalam konfigurasi atau melalui .env.local, terutamanya untuk docker atau persekitaran bersama dengan menetapkan hos: '0.0.0.0' dan menyesuaikan tetapan HMR. Arahan @Vite dengan lancar mengendalikan kedua -dua persekitaran pembangunan dan pengeluaran, memanfaatkan modul ES asli, dan menghapuskan keperluan untuk campuran Laravel, menghasilkan proses binaan yang lebih cepat dan lebih berskala yang mengintegrasikan dengan lancar dengan aliran kerja frontend moden.

Menyediakan Vite dalam projek Laravel adalah mudah, terutamanya jika anda menggunakan Laravel 9 atau lebih baru, yang menyokong Vite keluar dari kotak. Berikut adalah cara untuk melakukannya dengan betul dan mula menggunakan alat frontend moden dengan aplikasi Laravel anda.

? 1. Semak versi Laravel dan PHP

Pastikan anda menggunakan Laravel 9 dan Php 8.0 . Vite menggantikan campuran Laravel bermula dari Laravel 9, jadi versi yang lebih lama perlu ditingkatkan atau dikonfigurasi secara manual.

Sekiranya anda berada di Laravel 8 atau lebih awal, pertimbangkan untuk menaik taraf atau memasang Vite secara manual (tidak disyorkan - lebih baik untuk menaik taraf Laravel).

? 2. Pasang Vite melalui npm

Jalankan arahan ini dalam Root Projek Laravel anda:

 Pemasangan NPM

Ini memasang kebergantungan lalai, termasuk vite , laravel-vite-plugin , dan @vitejs/plugin-react atau serupa, bergantung pada persediaan anda.

Jika Vite tidak dipasang (contohnya, dalam projek yang lebih lama), tambahkannya:

 Pemasangan NPM--Save-Dev Vite Laravel-Vite-Plugin

Memasang plugin yang diperlukan untuk kerangka frontend anda (pilihan):

 # Untuk bertindak balas
Pemasangan NPM--SAVE-DEV @VITEJS/Plugin-React

# Untuk vue
Pemasangan NPM--Save-Dev @Vitejs/Plugin-Vue

? 3. Konfigurasikan Vite dengan plugin Laravel

Buat fail vite.config.js dalam root projek anda (jika belum hadir):

 // vite.config.js
import {defineconfig} dari 'vite';
import Laravel dari 'laravel-vite-plugin';

Eksport DefinectonFig lalai ({
    Plugin: [
        Laravel ({
            // tentukan titik entri anda
            Input: ['Sumber/CSS/App.css', 'Sumber/JS/App.js'],
            Refresh: Benar,
        }),
    ],
    // Pilihan: Sekiranya anda menggunakan React atau Vue
    // menyelesaikan: {
    // alias: {
    // '@': '/sumber/js',
    //},
    //},
});

Ini memberitahu Vite di mana fail utama CSS dan JS anda terletak.

? 4. Kemas kini templat bilah untuk menggunakan @vite

Dalam fail susun atur utama anda (misalnya, resources/views/layouts/app.blade.php ), ganti panggilan campuran lama seperti @mix atau tag skrip hardcoded dengan:

 @Vite (['Sumber/CSS/App.css', 'Sumber/JS/App.js'])

Arahan ini:

• Memuatkan pelayan dev vite semasa npm run dev
• Output jalan membina yang betul dalam pengeluaran
• Mengendalikan penggantian modul panas (HMR) secara automatik

? Anda hanya perlu menyenaraikan titik masuk - Vite akan menyelesaikan selebihnya melalui import.

? 5. Skrip Pakej.JSON UPDATE

Pastikan package.json anda.json mempunyai skrip yang betul:

 "Skrip": {
    "Dev": "Vite",
    "Bina": "Vite Build",
    "Pratonton": "Pratonton Vite"
}

Atau, jika anda mahu penamaan khusus Laravel:

 "Skrip": {
    "Dev": "Vite",
    "Bina": "Vite Build",
    "Hidangkan": "Pratonton Vite"
}

? 6. memulakan pelayan dev atau membina untuk pengeluaran

Semasa pembangunan:

 NPM Run Dev

Ini memulakan pelayan pembangunan Vite (biasanya pada http://localhost:5173 ) dan membolehkan HMR.

Untuk membina pengeluaran:

 NPM Run Build

Ini menyusun dan meminimumkan aset ke dalam public/build/ .

Laravel secara automatik membaca fail manifes yang dihasilkan oleh Vite ( public/build/.vite/manifest.json ) untuk menyuntik URL aset yang betul.

? 7. Pilihan: Gunakan alias atau rangka kerja

Contoh React

Pasang Sokongan React:

 NPM Pasang React-Dom React-Dom

Kemas kini vite.config.js :

 Import React dari '@vitejs/plugin-react';

Eksport DefinectonFig lalai ({
    Plugin: [
        Laravel ({
            Input: ['Sumber/js/app.jsx'],
            Refresh: Benar,
        }),
        bertindak balas (),
    ],
});

Kemudian gunakan fail .jsx dan import bertindak balas secara normal.

Contoh Vue

 import Vue dari '@vitejs/plugin-vue';

Eksport DefinectonFig lalai ({
    Plugin: [
        Laravel ({
            Input: 'Sumber/js/app.js',
        }),
        vue ({
            Templat: {
                transformasseturls: {
                    asas: null,
                    includeabsolute: palsu,
                },
            },
        }),
    ],
});

? 8. Pengendalian Persekitaran & URL

Jika anda perlu menyesuaikan hos atau port pelayan Vite, buat .env.local atau kemas kini konfigurasi Vite:

 Eksport DefinectonFig lalai ({
    pelayan: {
        Tuan rumah: 'localhost',
        port: 5173,
        hmr: {
            Tuan rumah: 'localhost',
        },
    },
    Plugin: [...],
});

Untuk persekitaran bersama (seperti valet atau docker), anda mungkin perlu menetapkan host: '0.0.0.0' dan menyesuaikan hmr.host .

Nota akhir

• Arahan Blade @vite adalah pintar - ia berfungsi dalam kedua -dua dev dan pengeluaran.
• Tidak perlu menjalankan php artisan serve bersama Vite melainkan jika anda menguji laluan backend.
• Gunakan sintaks import / export dalam JS anda - Vite menyokong modul ES secara asli.
• Jangan lupa untuk melakukan penempatan public/build/ dalam penggunaan pengeluaran (atau membina penggunaan).

Itu sahaja! Anda kini mempunyai sistem membina frontend yang moden dan cepat yang diintegrasikan dengan Laravel menggunakan Vite. Ia lebih cepat daripada Webpack, mempunyai HMR segera, dan skala lebih baik.

Pada asasnya: Pasang, Konfigurasi Mata Kemasukan, Gunakan @vite , dan Run npm run dev .

Atas ialah kandungan terperinci Bagaimana untuk menubuhkan Vite dalam projek Laravel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!