Laravel Vite

Tim Laravel memperbarui paket vite-plugin Laravel pihak pertama untuk mendukung pemuatan ulang halaman penuh pada perubahan file blade/arbitrer.

Vite akan memuat ulang satu halaman penuh saat Anda mengedit templat blade (atau file lain yang Anda konfigurasikan) yang berubah. Tidak diperlukan lagi penyegaran browser manual selama pengembangan!

Konfigurasi dasar di file vite.config.js Anda terlihat seperti berikut saat menginstal proyek Laravel baru:

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,
        }),
    ],
});

Cuplikan di atas adalah yang disertakan dengan aplikasi Laravel baru, Anda tidak perlu melakukan apa pun agar hot reload bekerja pada proyek baru.

Catat konfigurasi penyegaran ketika disetel ke true, plugin Laravel Vite akan menyegarkan halaman saat Anda memperbarui file di jalur berikut:

routes/**
resources/views/**

Konvensi tersebut mungkin berfungsi untuk sebagian besar proyek, tetapi jika Anda ingin menyertakan jalur atau file lain, Anda dapat mengonfigurasi properti penyegaran:

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/**',
            ],
        }),
    ],
});

Lihat Bekerja dengan Blade & Rute di dokumentasi resmi untuk perincian lebih lanjut tentang opsi konfigurasi.

Contoh

Mari siapkan demo aplikasi Laravel untuk mendemonstrasikan hot reload. Pertama, mari buat proyek demo baru:

laravel new blade-hot-reload --git
cd blade-hot-reload

Setelah proyek terinstal, tambahkan berikut ini ke <head/> file welcome.blade.php yang ditemukan di resources/views/:

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

Selanjutnya, Anda ingin menginstal dependensi NPM dan menjalankan perintah dev:

npm install
npm run dev

Setiap perubahan yang Anda buat harus segera tercermin, tergantung pada pengaturan lingkungan pengembangan lokal Anda.