Современные приложения на Laravel используют Vite для управления фронтенд-ресурсами, такими как CSS и JavaScript.

Vite предоставляет быстрый сервер для разработки с поддержкой Hot Module Replacement (HMR), что позволяет разработчикам видеть изменения во фронтенде во многих случаях без необходимости вручную перезагружать всю страницу.

Давайте разберемся, как настроить Vite в проекте Laravel.

1. Что такое Vite?

Vite — это инструмент сборки фронтенда, который работает с JavaScript, CSS и современными фронтенд-фреймворками, такими как Vue и React.

В Laravel Vite помогает нам:

  • компилировать и объединять фронтенд-ресурсы;
  • запускать локальный сервер для разработки;
  • автоматически перезагружать измененные модули;
  • оптимизировать ресурсы для продакшна.

Laravel использует laravel-vite-plugin для интеграции Vite с приложением.

2. Установка зависимостей

Сначала убедитесь, что установлены Node.js и NPM.

node -v
npm -v

В вашем проекте Laravel установите фронтенд-зависимости:

npm install

Стандартный проект Laravel уже включает в себя необходимые конфигурацию Vite и зависимости.

3. Настройка vite.config.js

В корневом каталоге вашего проекта должно находиться:

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

Опция input указывает Vite, какие файлы нужно обрабатывать, а refresh: true включает интеграцию полной перезагрузки страницы Laravel при изменении соответствующих файлов.

4. Подключение ресурсов в Blade

В вашем макете Blade добавьте:

@vite([
    'resources/css/app.css',
    'resources/js/app.js'
])

Laravel будет загружать необходимые ресурсы с сервера разработки Vite во время разработки и из сгенерированных файлов сборки в продакшне.

5. Запуск серверов разработки

Откройте два терминала в корневой директории вашего проекта.

 Терминал 1 — Laravel

php artisan serve

 Терминал 2 — Vite

npm run dev

Теперь откройте локальный URL приложения Laravel в браузере.

Не закрывайте сервер разработки Vite во время работы над фронтендом.

6. Сборка для продакшна

Когда ваше приложение будет готово к деплою, выполните:

npm run build

Vite сгенерирует оптимизированные фронтенд-ресурсы, обычно внутри:

public/build/

Загрузите сгенерированные файлы сборки вместе с вашим приложением Laravel.

Как правило, вам не нужно запускать npm run dev на сервере продакшна при обслуживании предварительно собранного фронтенда.

7. Частые ошибки Vite

 Ошибка: Unable to locate file in Vite manifest

Выполните:

npm install
npm run build

Также убедитесь, что пути к ресурсам в вашем шаблоне Blade соответствуют входным данным, настроенным в vite.config.js.

 Ошибка: Connection refused

Убедитесь, что сервер разработки Vite запущен:

npm run dev

 Изменения во фронтенде не отображаются

Проверьте консоль браузера, терминал Vite и пути к ресурсам. При необходимости перезапустите сервер разработки.

Заключение

Vite делает фронтенд-разработку в Laravel быстрее и проще благодаря управлению ресурсами, горячим обновлениям и подготовке оптимизированных сборок для продакшна.

Запомните эти три команды:

npm install
npm run dev
npm run build

npm install устанавливает зависимости, npm run dev запускает сервер разработки, а npm run build подготавливает ресурсы для продакшна.

 Понимание конфигурации Vite — это небольшой, но важный шаг к уверенной разработке и деплою приложений на Laravel.