Vite в Laravel

Vite — инструмент для сборки фронтенда, который обеспечивает среду разработки и объединяет код для продакшена. Vite обычно используют для объединения файлов CSS и JavaScript в готовые ресурсы. В ларавеле Vite как сборщик по дефолту заменил Laravel Mix в версии 9.2.0

Установить Vite

В консоле в корне приложения запускаем команду:

npm install

Запуск Vite

Есть два способа запустить Vite. Вы можете запустить сервер разработки с помощью dev команды, которая полезна при локальной разработке. Сервер разработки автоматически обнаружит изменения в ваших файлах и мгновенно отразит их в любых открытых окнах браузера.

npm run dev

Или, запустив build команду, вы создадите версию и свяжете активы вашего приложения и подготовите их для развертывания в рабочей среде:

npm run build

Компиляция SASS

Чтобы компилировались файлы .scss нужно добавить в зависимость компилятор sass. Сделать это можно запустив команду:

npm install sass --save-dev

Обработка статических ресурсов

Vite не может находить ресурсы в шаблонах Blade. Например вот такое изображение:

<img src="{{ Vite::asset('resources/images/logo.png') }}">

Вы будете получать ошибку:

Unable to locate file in Vite manifest: resources/images/logo.jpg.

Решить можно через javascript. Для этого необходимо сообщить Vite о статических ресурсах, импортировав их в точку входа приложения. Например, если вы хотите обрабатывать и версионировать все изображения хранящиеся в resources/images и все шрифты хранящиеся в resources/fonts, вы должны добавить следующее в точку входа вашего приложения:

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);