لاراول میکس در لاراول

برای مهاجرت از Vite به Laravel Mix

ابتدا باید Laravel Mix را توسط npm نصب کنید:

دستور زیر در ترمینال وارد کنید

  npm install --save-dev laravel-mix  

فایل webpack.mix.js باید به این صورت باشه

 const mix = require("laravel-mix"); /* |-------------------------------------------------------------------------- | 
Mix Asset Management 
|-------------------------------------------------------------------------- | 
| Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel application. By default, we are compiling the Sass | file for the application as well as bundling up all the JS files. | */ 
mix.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss", "public/css")
.sourceMaps();  

اسکریپت های NPM خود را در فایل package.json به روز کنید:

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

برای استفاده از پیشوند MIX_ به جای VITE_، باید متغیرهای محیطی را که به صراحت در فایل‌های .env شما در معرض دید هستند، به‌روزرسانی کنید:

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

اگر CSS خود را از طریق جاوا اسکریپت وارد می کنید، باید این عبارات را  حذف کنید:

  - import "../css/app.css";  

جایگزین @vite با mix()

شما باید دستورالعمل @vite Blade را با تگ های <script> و <link rel="stylesheet"> و کمک کننده mix() جایگزین کنید:

 - @viteReactRefresh 
  - @vite("resources/js/app.js") 
  
  + <link rel="stylesheet" href="{{ mix("css/app.css") }}" 

  + <script src="{{ mix("js/app.js") }}" defer"></script>  

  با وارد کردن دستور زیر در ترمینال Vite و پلاگین لاراول می تونید حذف نصب کنید:

  npm remove vite laravel-vite-plugin  

در مرحله بعد، می توانید فایل پیکربندی Vite خود را حذف کنید:

  rm vite.config.js  

منبع : کلیک کنید