Как запустить проект Laravel с Vite: пошаговое руководство

Чтобы запустить проект Laravel с помощью Vite, вы можете выполнить следующие действия:

Шаг 1. Создайте новый проект Laravel

composer create-project --prefer-dist laravel/laravel myproject
cd myproject

Шаг 2. Установите пакет пользовательского интерфейса Laravel

composer require laravel/ui

Шаг 3. Создайте каркас пользовательского интерфейса Laravel

php artisan ui react --auth

Шаг 4. Установите Vite

npm init -y
npm install --save-dev vite

Шаг 5. Настройка Vite
Создайте vite.config.js

const { createVuePlugin } = require('vite-plugin-vue2');
module.exports = {
  plugins: [createVuePlugin()],
};

Шаг 6. Обновите конфигурацию Laravel Mix
Откройте файл webpack.mix.jsи замените его содержимое следующим кодом:

const mix = require('laravel-mix');
const { VitePlugin } = require('laravel-mix-vite');
mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  .vite({
    config: 'vite.config.js',
    clearConsole: true,
  })
  .webpackConfig({
    devServer: {
      proxy: {
        '*': 'http://localhost:8000',
      },
    },
  });

Шаг 7. Запустите сервер разработки

npm run dev

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