Для того чтобы использовать Vite на вашем рабочем хосте в Laravel, вам понадобится выполнить несколько шагов.
1. Установка Vite:
Сначала вам нужно установить Vite как зависимость вашего проекта. Это можно сделать с помощью npm или yarn. Откройте терминал и перейдите в папку вашего проекта Laravel. Затем выполните команду установки:
# Используя npm npm install --save-dev vite # Или используя yarn yarn add --dev vite
2. Конфигурация Vite:
После установки Vite вам нужно создать файл конфигурации vite.config.js в корне вашего проекта. В этом файле можно указать настройки для Vite, такие как пути к входным и выходным файлам, плагины и прочее. Пример конфигурации может выглядеть так:
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
build: {
outDir: 'public',
manifest: true,
rollupOptions: {
input: {
main: './resources/js/main.js'
}
}
}
});
3. Настройка скриптов в package.json:
Теперь нужно настроить скрипты сборки проекта в package.json. Добавьте следующие скрипты:
"scripts": {
"dev": "vite",
"build": "vite build",
"start": "vite preview"
}
4. Изменение пути к файлам в шаблонах:
Теперь, вам нужно изменить путь к файлам стилей и скриптам в ваших шаблонах, чтобы они указывали на выходные файлы, сгенерированные Vite. Например, вы можете использовать следующий код в файле resources/views/layouts/app.blade.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
</head>
<body>
<div id="app"></div>
<script src="{{ asset('js/main.js') }}"></script>
</body>
</html>
5. Запуск проекта:
Теперь вы можете запустить проект, используя следующую команду:
npm run dev
Эта команда запустит сервер разработки Vite и будет компилировать ваши файлы при их изменении.
Если вам нужно собрать проект для production, вы можете запустить следующую команду:
npm run build
Эта команда создаст оптимизированные версии ваших файлов и положит их в папку public вашего Laravel проекта.
Кроме того, вы можете использовать команду "start" для запуска предварительного просмотра вашего проекта в production режиме:
npm run start
На этом все! Теперь вы можете использовать Vite для разработки вашего проекта Laravel на вашем рабочем хосте.