Cara Memigrasi Aplikasi Laravel Vue Dari Mix Ke Vite

Mengapa Menggunakan Vite?

Vite adalah alat build front-end baru yang menyediakan lingkungan pengembangan yang sangat cepat dan menggabungkan kode Anda untuk produksi. Untuk informasi lebih lanjut, lihat dokumen resmi Why Vite. Bermigrasi dari Laravel Mix ke Vite

Kami akan memigrasikan aplikasi kami dari Laravel Mix ke Vite. Migrasi melibatkan langkah-langkah di bawah ini. Lihat panduan migrasi plugin Laravel Vite resmi untuk panduan komprehensif.

No	Ini adalah 10 langkah berikutnya yang perlu kita lakukan:
1	Instal Vite dan Laravel Plugin
2	Konfigurasi Vite
3	Perbarui skrip NPM
4	Ganti keharusan untuk mengimpor
1	Perbarui variabel lingkungan
1	Ganti mix() dengan @vite
1	Hapus Laravel Campuran
1	Konfigurasikan Tail Wind
1	Hapus cache
1	Hot Refresh

Langkah langkah

1. Instal Vite dan Plugin Laravel

Pertama, kita perlu menginstal Vite dan Laravel Vite Plugin.

Instal dependensi

Vite

laravel-vite-plugin

npm install --save-dev vite laravel-vite-plugin

Sekarang kita perlu menginstal plugin Vue Vite yang tergantung pada versi Vue kita.

Untuk Vue 3

@vitejs/plugin-vue

npm install --save-dev @vitejs/plugin-vue

Untuk Vue >= 2.7

@vitejs/plugin-vue2

npm install --save-dev @vitejs/plugin-vue2

Untuk Vue <= 2.6

@vite-plugin-vue2

npm install --save-dev vite-plugin-vue2

Jika Anda menggunakan plugin Vite tambahan di proyek Anda, instal sekarang.

2. Konfigurasi Vite

Buat file vite.config.js di root proyek Anda.

Jika Anda membuat Laravel SPA, Anda akan mendapatkan pengalaman yang lebih baik dengan mengimpor CSS dari titik masuk JavaScript, seperti titik masuk sumber resources/js/app.js (lihat langkah 4).

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

!!! import your vue version:
# import vue from '@vitejs/plugin-vue' // vue 3
# import vue from "@vitejs/plugin-vue2"; // vue >= 2.7
# import { createVuePlugin } from 'vite-plugin-vue2'; // vue <= 2.6

export default defineConfig({
    plugins: [
        laravel({
            input: [
                "resources/js/app.js"
                "resources/js/app.js",// remove this line if Laravel SPA
            ],
            vue(), // vue 3 or vue >= 2.7
            createVuePlugin(), // vue <= 2.7
        }),
        define: {
            "process.env": process.env,
        },
        resolve: {
            alias: {
                vue: "vue/dist/vue.esm.js",
                "~": "/resources/js",
            },
        },
    ],
});

Jika Anda mendapatkan ERROR ini

[Peringatan Vue]: Anda menggunakan versi runtime-only Vue di mana kompiler template tidak tersedia. Lakukan pra-kompilasi template ke dalam fungsi render, atau gunakan build yang disertakan dengan compiler.

Anda perlu menambahkan alias untuk menyelesaikan ini

resolve: {
    alias: {
        vue: 'vue/dist/vue.esm.js',
    }
}

Vite membutuhkan ekstensi file seperti (.vue).

jika Anda mengimpor komponen Vue tanpa ekstensi .vue, Anda akan mendapatkan EROOR:

GET http://localhost:3000/resources/js/components/XXX net::ERR_ABORTED 404 (Tidak Ditemukan)

Anda perlu mengubah komponen impor Vue menjadi ini:

import XXX from "./components/pages/XXX.vue";

3. Perbarui skrip NPM

Perbarui skrip NPM Anda di file package.json.

"scripts": {
-     "dev": "npm run development",
-     "development": "mix",
-     "watch": "mix watch",
-     "watch-poll": "mix watch -- --watch-options-poll=1000",
-     "hot": "mix watch --hot",
-     "prod": "npm run production",
-     "production": "mix --production"
+     "dev": "vite",
+     "build": "vite build"
  }

4. Ganti kebutuhan untuk mengimpor

Untuk memutakhirkan aplikasi yang ada agar berfungsi dengan Vite, Anda harus mengganti pernyataan wajib () apa pun dengan impor karena Vite hanya mendukung modul ES. Lihat permintaan penarikan ini untuk contoh referensi.

1. Tingkatkan file `resource/js/app.js:`

- require('./bootstrap');
+ import './bootstrap';

Jika Anda membuat Laravel SPA, impor file gaya Anda (css/scss).

import './bootstrap';
+ import '../css/app.css';
+ import "../sass/app.scss"; // if use using scss

2. Upgrade resources/js/bootstrap.js file:

- window._ = require('lodash');
+ import _ from 'lodash';
+ window._ = _;

/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/

- window.axios = require('axios');
+ import axios from 'axios';
+ window.axios = axios;

/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/

// import Echo from 'laravel-echo';
- // window.Pusher = require('pusher-js');
+ // import Pusher from 'pusher-js';
+ // window.Pusher = Pusher;

5. Perbarui variabel lingkungan

Buka file .env Anda di root proyek Anda, dan ganti lingkungan hosting untuk menggunakan awalan VITE_ alih-alih MIX_

1. Perbarui file `.env`:

-    MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}" 
-    MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" 
+    VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}" 
+    VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Selain itu, Anda perlu memperbarui referensi ini dalam kode JavaScript Anda untuk menggunakan nama variabel baru dan sintaks Vite:

2. Perbarui file resources/js/bootstrap.js:

- key: process.env.MIX_PUSHER_APP_KEY, 
- cluster: process.env.MIX_PUSHER_APP_CLUSTER, 
+ key: import.meta.env.VITE_PUSHER_APP_KEY, 
+ cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,

6. Ganti mix() dengan @vite

Kita perlu menggunakan direktif @vite Blade daripada helper mix(). Ini akan secara otomatis mendeteksi apakah Anda menjalankan dalam mode servis atau build dan menyertakan semua yang diperlukan.

Perbarui file resources/views/app.blade.php

- <!-- css -->
- <link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}">
- <!-- js -->
- <script src="{{ mix('js/app.js') }}" defer></script>
+ @vite(['resources/css/app.css', 'resources/js/app.js']) // 
+ @vite(['resources/js/app.js']) // if use Laravel SPA not include style

- <!-- css -->
- <link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}">
- <!-- js -->
- <script src="{{ mix('js/app.js') }}" defer></script>
+ @vite(['resources/css/app.css', 'resources/js/app.js']) // 
+ @vite(['resources/js/app.js']) // if use Laravel SPA not include style

jika Anda menggunakan Laravel SPA tidak menyertakan file css, Anda harus mengimpor file pada file resources/js/app.js (langkah 4).

7. Hapus Campuran Laravel

Hapus paket Laravel Mix dan file konfigurasi Webpack.

1. Paket Laravel Mix yang Dihapus Instalasinya:

npm remove laravel-mix

2. Hapus file konfigurasi Webpack Mix Anda:

rm webpack.mix.js

8. Konfigurasi Tailwind

Jika Anda menggunakan Tailwind, buat file postcss.config.js di root proyek Anda.

Tailwind dapat menghasilkan ini untuk Anda secara otomatis:

npx tailwindcss init -p

Atau, Anda dapat membuatnya secara manual:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Jika Anda menggunakan plugin PostCSS lainnya, seperti impor-postcss, Anda harus memasukkannya ke dalam konfigurasi Anda.

9. Hapus cache

Untuk menghapus cache di Laravel menggunakan antarmuka baris perintah PHP Artisan:

php artisan optimize:clear

10. Hot Refresh

Paket vite-plugin Laravel versi terbaru akan memuat ulang satu halaman penuh saat Anda mengedit template blade. Juga, mereka menyediakan opsi konfigurasi untuk menambahkan file dan folder.

Tidak diperlukan lagi penyegaran browser manual selama pengembangan!

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

routes/** 
resources/views/**

Tambahkan Hot refresh

Perbarui file vite.config.js:

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/js/app.js"],
            postcss,
+           refresh: true,
        }),
        vue(),
    ],
    define: {
        "process.env": process.env,
    },
    resolve: {
        alias: {
            vue: "vue/dist/vue.esm.js",
            "~": "/resources/js",
        },
    },
});

Thank you for reading^^