يوجد دليل كامل في مستندات Laravel عن كيفية استخدام Vite، وإليك الخطوات:
1- تثبيت Vite
يجب الإنتباه إلى أنه في الإصدارات الأخيرة يأتي Vite مدمج في إطار لارافيل وكل ما تحتاجه هو تشغيل الأمر npm run dev فقط.
ولكن إذا كان غير موجود فإليك طريقة تثبيته.
يمكنك تثبيت Vite باستخدام npm باستخدام الأمر التالي:
npm install -D vite laravel-vite-plugin
2- تحرير ملف package.json
عليك تحديث ملف package.json وإضافة مجموعة من الأوامر لتسمح لك بتشغيل Vite. بدلاً من استخدام Laravel Mix، تحتاج إلى إضافة أوامر Vite إلى ملف scripts، على النحو التالي:
"scripts": {
"dev": "vite",
"build": "vite build"
},
3- حذف ملف webpack.mix.js
يجب أن تحذف ملف webpack.mix.js فلم نعد بحاجة إليه.
4- يجب إنشاء ملف 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,
}),
],
});
4- تحديث ملف العرض الرئيسي
ستحتاج إلى تحديث ملف العرض الرئيسي الخاص بك وهو app.blade.php الموجود في المسار resources/views/layouts/ لتحويل الاستدعاءات الخاصة بـ Laravel Mix إلى استدعاءات Vite. يجب أن يكون شكل الاستدعاءات على هذا النحو:
<head>
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
والآن يمكنك تشغيل المشروع من خلال الأمر npm run dev.
الطريقة الأسهل لتثبيت Vite في مشروع لارافيل
باستخدام Laragon قم بالضغط بزر الفأرة الأيمن داخل نافذة البرنامج وستظهر لك قائمة، اختر منها التالي:
Quick app ثم اختر Laravel
وبذلك سيتم إنشاء مشروع لارافيل مع Vite في ملف Root الخاص بـ Laragon، بعد ذلك يمكنك نقل ملفات مشروع إلى المجلد لكن بعد حذف ملفات Mix.