Расширенная настройка Ларавел Vite.

4 месяца назад

Ларавел из коробки включает базовую настройку Vite, у которого есть много дополнительных плагинов настроек. Но некоторые из не входят в стандартный набор Laravel.

В этой статье мы попробуем собрать файлы css и js файлы в отдельную директорию.

Например, это может быть нужно для того, чтобы положить файлы не в папку public, а в папкуpublic_html по требованию конфигурации сервера или хостинга.

Мы же просто сложим готовые файлы в папку public_html/vite

Меняем директорию по умолчанию для Laravel 11

Собираем базовый проект Ларавел.

Меняем директорию по умолчанию с public на public_html.

Для этого открываем файл app/Providers/AppServiceProvider.php и добавляем:

public function boot(): void
{
    // Добавляем
    app()->usePublicPath(dirname(__DIR__, 2).'/public_html');

}

Конфигурацию Vite.

Находим файл настроек vite.config.js.

Подключаем path:

import path from 'path';

Указываем папку, в которую будем собирать файлы:

build: {
        outDir: path.resolve(__dirname, 'public_html/vite'),
    },
 

Теперь файл настроек vite.config.js выглядит таким образом:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';

export default defineConfig({
	build: {
		outDir: path.resolve(__dirname, 'public_html/vite'),
	},
	
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Подключаем директиву

Подключаем файлы через директиву Laravel @vite

Открываем файл \resources\views\welcome.blade.php

Находим:

@if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
            @vite(['resources/css/app.css', 'resources/js/app.js'])
        @else

Нам в примере особо не нужно условие, поэтому его можно спокойно убрать или изменить.

Настройка самой директивы @vite:

@if ( true )
    {{
    Vite::useBuildDirectory('vite')
        ->useManifestFilename('manifest.json') 
        ->withEntryPoints(['resources/css/app.css', 'resources/js/app.js']);
    }}
@else

Всё, такая настройка директивы подхватывает новые пути.

Теперь мы можем менять папку вывода и подхватывать вывод директивой vite.

К списку статей