Как работать с Vite в Laravel?

Для работы с Vite в Laravel, вам потребуется выполнить несколько шагов:

Шаг 1: Установите Laravel
Первым делом убедитесь, что у вас установлена последняя версия Laravel. Установку можно выполнить, используя Composer командой:

composer global require laravel/installer

После установки создайте новый проект Laravel командой:

laravel new my-project

Шаг 2: Установите Vite
Vite - это новый инструмент для разработки фронтенда, который обеспечивает быструю сборку и обновление в режиме реального времени. Установите его глобально, используя npm:

npm install -g create-vite

Шаг 3: Создайте новый проект Vite
Перейдите в каталог вашего Laravel проекта и создайте новый проект Vite командой:

create-vite my-project --template vue

Замените my-project на имя вашего проекта.

Шаг 4: Установите зависимости
Перейдите в каталог Vite проекта и установите зависимости командой:

cd my-project
npm install

Шаг 5: Конфигурация Laravel
Откройте файл webpack.mix.js в корне вашего Laravel проекта и измените его содержимое на следующее:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

if (mix.inProduction()) {
    mix.version();
}

Шаг 6: Конфигурация Vite
Откройте файл vite.config.js в каталоге Vite проекта и измените его содержимое на следующее:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue()
    ],
    resolve: {
        alias: {
            '@': require('path').resolve(__dirname, '/resources/js')
        }
    },
    server: {
        proxy: {
            '^/api/.*': {
                target: 'http://localhost:8000',
                changeOrigin: true
            }
        }
    }
})

Обратите внимание, что мы установили прокси-сервер для перенаправления запросов к API Laravel.

Шаг 7: Запустите проект
Запустите проект, выполнив команду npm run dev в каталоге Vite проекта. Это запустит Vite-сервер и компиляцию Laravel Mix:

npm run dev

Теперь вы готовы работать с Vite в Laravel! Вы можете создать новые компоненты Vue в каталоге resources/js и использовать их в своих Laravel-представлениях. Если вы вносите изменения в файлы JavaScript или CSS, они будут автоматически пересобираться и обновляться в реальном времени благодаря Vite.

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