Настройка Vite в Laravel 9

Question

Настройка Vite в Laravel 9

Рейтинг: 0Ответов: 2Опубликовано: 04.02.2023

В последних версиях Laravel в коробке идет Vite, который у меня никак не хочет работать нормально. В данный момент есть 2 основные проблемы:

При сборке vite build он бросает все файлы в папку public/build/assets, хотя, насколько я понимаю, все должно падать в public/assets.
Vite собирает только те файлы, которые попадаются в js и css моего проекта - это указано в конфиге. Но как добавить в конфиг и все blade-файлы, чтобы из них он тоже собирал картинки?

И вообще, может быть кто-то поделится правильным конфигом, который используется в повседневной работе?

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/scss/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

laravel vite laravel-9

Источник: Stack Overflow на русском

Answer 1

▲ 0

Обработка URL

При использовании Vite и ссылках на ресурсы в HTML, CSS или JS вашего приложения необходимо учитывать несколько предостережений. Во-первых, если вы ссылаетесь на активы с абсолютным путем, Vite не будет включать актив в сборку; поэтому вы должны убедиться, что актив доступен в вашем общедоступном каталоге.

При ссылке на относительные пути ресурсов вы должны помнить, что пути относятся к файлу, в котором они указаны. Любые активы, на которые ссылается относительный путь, будут переписаны, версионированы и объединены Vite.

public/
  taylor.png
resources/
  js/
    Pages/
      Welcome.vue
  images/
    abigail.png

В следующем примере показано, как Vite будет обрабатывать относительные и абсолютные URL-адреса:

<!-- Этот актив не обрабатывается Vite и не будет включен в сборку. -->
<img src="/taylor.png">

<!-- Этот актив будет переписан, версионирован и объединен Vite. -->
<img src="../../images/abigail.png">

Обработка статических ресурсов с помощью Vite

При ссылке на активы в вашем JavaScript или CSS Vite автоматически обрабатывает и версионирует их. Кроме того, при создании приложений на основе Blade Vite также может обрабатывать статические ресурсы, на которые вы ссылаетесь, исключительно в шаблонах Blade.

Однако для того, чтобы осуществить это, вам нужно сообщить Vite о ваших ресурсах, импортировав статические ресурсы в точку входа приложения. Например, если вы хотите обрабатывать и версионировать все изображения, хранящиеся в resources/images, и все шрифты, хранящиеся в resources/fonts, вы должны добавить следующее в точку входа вашего приложения resources/js/app.js:

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);

Эти активы теперь будут обрабатываться Vite при запуске npm run build. Затем вы можете ссылаться на эти активы в шаблонах Blade, используя метод Vite::asset, который вернет URL-адрес версии для данного актива:

<img src="{{ Vite::asset('resources/images/logo.png') }}">

Answer 2

▲ 0

Чтобы правильно работали статистические изображения в CSS файлах как background-image: url(/img/main/image.png) при npm run dev и npm run build мне помогло:

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,
        }),
    ],
    publicDir: 'public',
    base: '/',
    build: {
        assetsDir: '',
        copyPublicDir: false,
    },
});

Настройка Vite в Laravel 9

Ответы