Сборка ресурсов (Vite)

Введение
Установка и настройка
Установка Node
Установка Vite и плагина Laravel
Настройка Vite
Загрузка ваших скриптов и стилей
Запуск Vite
Работа с JavaScript
Псевдонимы
Vue
React
Inertia
Обработка URL
Working With Stylesheets
Работа с Blade и маршрутами
Обработка статических ресурсов с Vite
Обновление при сохранении
Псевдонимы
Пользовательские базовые URL
Переменные среды
Отключение Vite в тестах
Рендеринг на стороне сервера (SSR)
Атрибуты тегов Style b Script
Content Security Policy (CSP) Nonce
Subresource Integrity (SRI) (Wелостность подресурсов)
Произвольные атрибуты
Расширенная настройка
Коррекция URL-адресов сервера разработки

Введение

Vite – это современный инструмент сборки фронтенда, который обеспечивает чрезвычайно быстрое окружение разработки и собирает ваш код для продакшена. При создании приложений с использованием Laravel вы обычно используете Vite для сборки файлов CSS и JavaScript вашего приложения в готовые к продакшену ресурсы.

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

Вы используете Laravel Mix? Vite заменил Laravel Mix в новых установках Laravel. Для документации по Mix посетите веб-сайт Laravel Mix. Если вы хотите перейти на Vite, ознакомьтесь с нашим руководством по миграции.

Выбор между Vite и Laravel Mix

Прежде чем перейти на Vite, новые приложения Laravel использовали Mix при сборке ресурсов, который работает на основе webpack. Vite сосредоточен на предоставлении более быстрого и продуктивного опыта при создании мощных JavaScript-приложений. Если вы разрабатываете одностраничное приложение (SPA), включая те, которые разработаны с использованием инструментов, таких как Inertia, то Vite будет идеальным выбором.

Vite также хорошо работает с традиционными приложениями с серверным рендерингом с “примесью” JavaScript, включая те, которые используют Livewire. Однако у него нет некоторых функций, которые поддерживает Laravel Mix, таких как возможность копирования произвольных ресурсов, на которые нет прямых ссылок в вашем приложении JavaScript, в сборку.

Возвращение к Mix

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

Установка и настройка

В следующей документации рассматривается процесс ручной установки и настройки плагина Laravel Vite. Однако стартовые комплекты Laravel уже включают в себя всю эту структуру и являются самым быстрым способом начать работу с Laravel и Vite.

Установка Node

Перед запуском Vite и плагина Laravel убедитесь, что у вас установлены Node.js (версии 16 и выше) и NPM:

node -v
npm -v

Вы можете легко установить последнюю версию Node и NPM, используя простые установщики с официального сайта Node. Или, если вы используете Laravel Sail, вы можете вызвать Node и NPM через Sail:

./vendor/bin/sail node -v
./vendor/bin/sail npm -v

Установка Vite и плагина Laravel

В новой установке Laravel в корне структуры каталогов вашего приложения вы найдете файл package.json. В файле package.json уже содержится все необходимое для начала работы с Vite и плагином Laravel. Вы можете установить зависимости фронтенда вашего приложения через NPM:

npm install

Настройка Vite

Vite настраивается с помощью файла vite.config.js в корне вашего проекта. Вы можете настраивать этот файл по своему усмотрению, а также устанавливать любые другие плагины, необходимые для вашего приложения, такие как @vitejs/plugin-vue или @vitejs/plugin-react.

Плагин Laravel Vite требует указания точек входа для вашего приложения. Это могут быть файлы JavaScript или CSS, включая предварительно обработанные языки, такие как TypeScript, JSX, TSX и Sass.

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

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

Если вы создаете SPA, включая приложения, построенные с использованием Inertia, то Vite будет лучше всего работать без точек входа CSS:

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

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css', // [tl! remove]
            'resources/js/app.js',
        ]),
    ],
});

Вместо этого вы должны импортировать свой CSS через JavaScript. Обычно это делается в файле resources/js/app.js вашего приложения:

import './bootstrap';
import '../css/app.css'; // [tl! add]

Плагин Laravel также поддерживает несколько точек входа и расширенные параметры конфигурации, такие как точки входа SSR.

Работа с защищенным сервером разработки

Если ваш локальный веб-сервер разработки обслуживает ваше приложение через HTTPS, у вас могут возникнуть проблемы с подключением к серверу разработки Vite.

Если вы используете Laravel Herd и зашифровали сайт, или вы используете Laravel Valet и запустили команду secure для вашего приложения, плагин Laravel Vite автоматически обнаружит и использует сгенерированный TLS-сертификат.

Если вы зашифровали сайт с использованием хоста, который не соответствует имени каталога приложения, вы можете вручную указать хост в файле vite.config.js вашего приложения:

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

export default defineConfig({
    plugins: [
        laravel({
            // ...
            detectTls: 'my-app.test', // [tl! add]
        }),
    ],
});

Когда вы используете другой веб-сервер, вы должны сгенерировать доверенный сертификат и вручную настроить Vite для использования сгенерированных сертификатов:

// ...
import fs from 'fs'; // [tl! add]

const host = 'my-app.test'; // [tl! add]

export default defineConfig({
    // ...
    server: { // [tl! add]
        host, // [tl! add]
        hmr: { host }, // [tl! add]
        https: { // [tl! add]
            key: fs.readFileSync(`/path/to/${host}.key`), // [tl! add]
            cert: fs.readFileSync(`/path/to/${host}.crt`), // [tl! add]
        }, // [tl! add]
    }, // [tl! add]
});

Если вы не можете сгенерировать доверенный сертификат для вашей системы, вы можете установить и настроить плагин @vitejs/plugin-basic-ssl. При использовании ненадежных сертификатов вам нужно будет принять предупреждение о сертификате для сервера разработки Vite в вашем браузере, перейдя по ссылке “Local” в консоли при выполнении команды npm run dev.

Запуск сервера разработки в Sail на WSL2

При запуске сервера разработки Vite в Laravel Sail на Windows Subsystem for Linux 2 (WSL2), вам следует добавить следующую конфигурацию в ваш файл vite.config.js, чтобы обеспечить связь браузера с сервером разработки:

// ...

export default defineConfig({
    // ...
    server: { // [tl! add:start]
        hmr: {
            host: 'localhost',
        },
    }, // [tl! add:end]
});

Загрузка ваших скриптов и стилей

После настройки точек входа Vite вы можете ссылаться на них с помощью директивы @vite() в Blade, которую вы должны добавить в <head> корневого шаблона вашего приложения:

<!doctype html>
<head>
    {{-- ... --}}

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Если вы импортируете свой CSS через JavaScript, вам нужно включить только точку входа JavaScript:

<!doctype html>
<head>
    {{-- ... --}}

    @vite('resources/js/app.js')
</head>

Директива @vite автоматически обнаруживает сервер разработки Vite и внедряет клиент Vite для возможности горячей замены модулей. В режиме сборки директива загрузит ваши скомпилированные и пронумерованные ресурсы, включая любой импортированный CSS.

При необходимости вы также можете указать путь сборки ваших скомпилированных ресурсов при вызове директивы @vite.

<!doctype html>
<head>
    {{-- Given build path is relative to public path. --}}

    @vite('resources/js/app.js', 'vendor/courier/build')
</head>

Встраивание ресурсов

Иногда может быть необходимо включить сырое содержимое ресурсов, а не ссылаться на версионный URL ресурса. Например, вам может понадобиться включить содержимое ресурса непосредственно на страницу, когда передаете HTML-контент генератору PDF. Вы можете выводить содержимое ресурсов Vite с помощью метода content, предоставленного фасадом Vite:

@php
use Illuminate\Support\Facades\Vite;
@endphp

<!doctype html>
<head>
    {{-- ... --}}

    <style>
        {!! Vite::content('resources/css/app.css') !!}
    </style>
    <script>
        {!! Vite::content('resources/js/app.js') !!}
    </script>
</head>

Запуск Vite

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

Или выполнить команду build, которая версионирует и соберет ресурсы вашего приложения, подготовив их к развертыванию в производственной среде:

# Run the Vite development server...
npm run dev

# Build and version the assets for production...
npm run build

Если вы запускаете сервер разработки в Sail на WSL2, вам могут потребоваться дополнительные опции конфигурации.

Работа с JavaScript

Псевдонимы

По умолчанию плагин Laravel предоставляет общий псевдоним, чтобы вы могли начать работу сразу и удобно импортировать ресурсы вашего приложения:

{
    '@' => '/resources/js'
}

Вы можете переопределить псевдоним '@', добавив собственный в файл конфигурации vite.config.js:

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

export default defineConfig({
    plugins: [
        laravel(['resources/ts/app.tsx']),
    ],
    resolve: {
        alias: {
            '@': '/resources/ts',
        },
    },
});

Vue

Если вы хотите собрать свой фронтенд, используя фреймворк Vue, вам также нужно установить плагин @vitejs/plugin-vue:

npm install --save-dev @vitejs/plugin-vue

Затем вы можете включить плагин в ваш файл конфигурации vite.config.js. При использовании плагина Vue с Laravel вам потребуются несколько дополнительных параметров:

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

export default defineConfig({
    plugins: [
        laravel(['resources/js/app.js']),
        vue({
            template: {
                transformAssetUrls: {
                    // Плагин Vue перепишет URL-адреса ресурсов, когда они 
                    // будут использоваться в однофайловых компонентах, 
                    // чтобы указывать на веб-сервер Laravel. Установка этого 
                    // значения в `null` позволяет вместо этого плагину Laravel 
                    // переписывать URL-адреса ресурсов, чтобы они указывали на сервер Vite.
                    base: null,

                    // Плагин Vue будет анализировать абсолютные URL-адреса и рассматривать 
                    // их как абсолютные пути к файлам на диске. Установка этого значения в 
                    // `false` оставит абсолютные URL-адреса нетронутыми, чтобы они могли 
                    // ссылаться на ресурсы в папке public, как ожидается.
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Стартовые наборы Laravel (starter kits) уже включают правильную конфигурацию Laravel, Vue и Vite. Посмотрите Laravel Breeze для самого быстрого способа начать работу с Laravel, Vue и Vite.

React

Если вы хотите собрать свой фронтенд, используя фреймворк React, вам также необходимо установить плагин @vitejs/plugin-react:

npm install --save-dev @vitejs/plugin-react

Затем вы можете включить плагин в ваш файл конфигурации vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel(['resources/js/app.jsx']),
        react(),
    ],
});

Вы должны убедиться, что любые файлы, содержащие JSX, имеют расширение .jsx или .tsx, помня о необходимости обновления вашей точки входа, если это требуется, как показано выше.

Вам также потребуется включить дополнительную директиву @viteReactRefresh вместе с вашей текущей директивой @vite в Blade.

@viteReactRefresh
@vite('resources/js/app.jsx')

Директива @viteReactRefresh должна быть вызвана перед директивой @vite.

Стартовые наборы Laravel (starter kits) уже включают правильную конфигурацию Laravel, React и Vite. Ознакомьтесь с Laravel Breeze – самым быстрым способом начать работу с Laravel, React и Vite.

Inertia

Плагин Laravel Vite предоставляет удобную функцию resolvePageComponent, которая поможет вам определить ваши компоненты страниц Inertia. Ниже приведен пример использования помощника с Vue 3; однако, вы также можете использовать эту функцию в других фреймворках, таких как React:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

createInertiaApp({
  resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
  setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
});

Стартовые наборы Laravel (starter kits) уже включают правильную конфигурацию Laravel, Inertia и Vite. Ознакомьтесь с Laravel Breeze чтобы быстро начать работу с Laravel, Inertia и Vite.

Обработка 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">

Working With Stylesheets

Вы можете узнать больше о поддержке CSS в Vite в документации Vite. Если вы используете плагины PostCSS, такие как Tailwind, вы можете создать файл postcss.config.js в корне вашего проекта, и Vite автоматически его применит.

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

Стартовые наборы Laravel (starter kits) уже включают правильную конфигурацию Tailwind, PostCSS и Vite. Или, если вы хотите использовать Tailwind и Laravel без использования одного из наших стартовых наборов, ознакомьтесь с руководством по установке Tailwind для Laravel.

Работа с Blade и маршрутами

Обработка статических ресурсов с 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') }}">

Обновление при сохранении

Когда ваше приложение построено с использованием традиционного рендеринга на стороне сервера с помощью Blade, Vite может улучшить ваш рабочий процесс разработки, автоматически обновляя браузер при внесении изменений в файлы представлений вашего приложения. Чтобы начать, просто укажите параметр refresh как true.

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

export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: true,
        }),
    ],
});

Когда параметр refresh установлен в true, сохранение файлов в следующих каталогах вызовет полное обновление страницы в браузере при выполнении команды npm run dev:

app/View/Components/**
lang/**
resources/lang/**
resources/views/**
routes/**

Отслеживание каталога routes/** полезно, если вы используете Ziggy для создания ссылок на маршруты во фронтенде вашего приложения.

Если эти стандартные пути не соответствуют вашим потребностям, вы можете указать собственный список путей для отслеживания:

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

export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: ['resources/views/**'],
        }),
    ],
});

В основе плагина Laravel Vite используется пакет vite-plugin-full-reload, который предлагает некоторые дополнительные параметры конфигурации для настройки поведения этой функции. Если вам нужен такой уровень настройки, вы можете предоставить определение config:

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

export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: [{
                paths: ['path/to/watch/**'],
                config: { delay: 300 }
            }],
        }),
    ],
});

Псевдонимы

Часто в JavaScript-приложениях создают псевдонимы для часто используемых каталогов. Однако, вы также можете создавать псевдонимы для использования в Blade, используя метод macro класса Illuminate\Support\Facades\Vite. Обычно “макросы” определяются в методе boot сервис-провайдера:

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Vite::macro('image', fn (string $asset) => $this->asset("resources/images/{$asset}"));
}

После определения макроса его можно вызвать в ваших шаблонах. Например, мы можем использовать определенный выше макрос image, чтобы ссылаться на ресурс, расположенный по пути resources/images/logo.png:

<img src="{{ Vite::image('logo.png') }}" alt="Laravel Logo">

Пользовательские базовые URL

Если ваши скомпилированные ресурсы Vite развернуты на домене, отличном от вашего приложения, например, через CDN, вы должны указать переменную окружения ASSET_URL в файле .env вашего приложения:

ASSET_URL=https://cdn.example.com

После настройки URL ресурса в начало всех переписанных URL-адреса ваших ресурсов будет добавлено указанное значение:

https://cdn.example.com/build/assets/app.9dce8d17.js

Помните, что абсолютные URL-адреса не переписываются Vite, поэтому они не будут изменены.

Переменные среды

Вы можете внедрить переменные среды в ваш JavaScript, добавив им префикс VITE_ в файле .env вашего приложения:

VITE_SENTRY_DSN_PUBLIC=http://example.com

Вы можете получить доступ к внедренным переменным среды через объект import.meta.env:

import.meta.env.VITE_SENTRY_DSN_PUBLIC

Отключение Vite в тестах

Интеграция Vite в Laravel будет пытаться разрешить ваши ресурсы во время выполнения ваших тестов, что требует запуска сервера разработки Vite или сборки ваших ресурсов.

Если вы предпочитаете использовать имитацию Vite во время тестирования, вы можете вызвать метод withoutVite, который доступен для всех тестов, расширяющих класс TestCase Laravel:

use Tests\TestCase;

class ExampleTest extends TestCase
{
    public function test_without_vite_example(): void
    {
        $this->withoutVite();

        // ...
    }
}

Если вы хотите отключить Vite для всех тестов, вы можете вызвать метод withoutVite из метода setUp вашего базового класса TestCase:

<?php

namespace Tests;

use Illuminate\Foundation\Testing\TestCase as BaseTestCase;

abstract class TestCase extends BaseTestCase
{
    use CreatesApplication;

    protected function setUp(): void// [tl! add:start]
    {
        parent::setUp();

        $this->withoutVite();
    }// [tl! add:end]
}

Рендеринг на стороне сервера (SSR)

Плагин Laravel Vite облегчает настройку рендеринга на стороне сервера с использованием Vite. Чтобы начать, создайте точку входа SSR в resources/js/ssr.js и укажите ее в плагине Laravel, передав конфигурационную опцию:

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

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

Чтобы не забыть перестроить точку входа SSR, мы рекомендуем изменить скрипт “build” в файле package.json вашего приложения для создания сборки SSR:

"scripts": {
     "dev": "vite",
     "build": "vite build" // [tl! remove]
     "build": "vite build && vite build --ssr" // [tl! add]
}

Затем, чтобы собрать и запустить сервер SSR, вы можете выполнить следующие команды:

npm run build
node bootstrap/ssr/ssr.js

Если вы используете SSR с Inertia, вы можете вместо этого использовать команду Artisan inertia:start-ssr для запуска сервера SSR:

php artisan inertia:start-ssr

Стартовые наборы Laravel (starter kits) уже включают правильную конфигурацию Laravel, SSR Inertia и Vite. Ознакомьтесь с Laravel Breeze для самого быстрого способа начать работу с Laravel, SSR Inertia и Vite.

Атрибуты тегов Style b Script

Content Security Policy (CSP) Nonce

Если вы хотите включить атрибут nonce в ваших тегах script и style как часть политики безопасности контента (Content Security Policy), вы можете сгенерировать или указать nonce, используя метод useCspNonce внутри собственного middleware:

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Vite;
use Symfony\Component\HttpFoundation\Response;

class AddContentSecurityPolicyHeaders
{
    /**
     * Handle an incoming request.
     *
     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
     */
    public function handle(Request $request, Closure $next): Response
    {
        Vite::useCspNonce();

        return $next($request)->withHeaders([
            'Content-Security-Policy' => "script-src 'nonce-".Vite::cspNonce()."'",
        ]);
    }
}

После вызова метода useCspNonce, Laravel автоматически включит атрибуты nonce во все сгенерированные теги script и style.

Если вам нужно указать nonce в другом месте, включая директиву @route Ziggy, входящую в стартовые наборы Laravel, вы можете сделать это, используя метод cspNonce:

@routes(nonce: Vite::cspNonce())

Если у вас уже есть nonce, который вы хотели бы использовать, вы можете передать его методу useCspNonce:

Vite::useCspNonce($nonce);

Subresource Integrity (SRI) (Wелостность подресурсов)

Если ваш манифест Vite включает хеши integrity для ваших ресурсов, Laravel автоматически добавит атрибут integrity ко всем тегам script и style, которые он генерирует, чтобы обеспечить целостность подресурсов. По умолчанию Vite не включает хеш integrity в свой манифест, но вы можете включить его, установив плагин vite-plugin-manifest-sri из NPM:

npm install --save-dev vite-plugin-manifest-sri

Затем вы можете включить этот плагин в вашем файле vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import manifestSRI from 'vite-plugin-manifest-sri';// [tl! add]

export default defineConfig({
    plugins: [
        laravel({
            // ...
        }),
        manifestSRI(),// [tl! add]
    ],
});

При необходимости вы также можете настроить ключ манифеста, где будет находиться хеш целостности:

use Illuminate\Support\Facades\Vite;

Vite::useIntegrityKey('custom-integrity-key');

Если вы хотите полностью отключить эту автообнаружение, вы можете передать false методу useIntegrityKey:

Vite::useIntegrityKey(false);

Произвольные атрибуты

Если вам нужно добавить дополнительные атрибуты к вашим тегам script и style, такие как атрибут data-turbo-track, вы можете указать их с помощью методов useScriptTagAttributes и useStyleTagAttributes. Обычно эти методы вызываются из сервис-провайдера:

use Illuminate\Support\Facades\Vite;

Vite::useScriptTagAttributes([
    'data-turbo-track' => 'reload', // Specify a value for the attribute...
    'async' => true, // Specify an attribute without a value...
    'integrity' => false, // Exclude an attribute that would otherwise be included...
]);

Vite::useStyleTagAttributes([
    'data-turbo-track' => 'reload',
]);

Если вам нужно использовать условие для добавления атрибутов, вы можете передать обратный вызов, который будет получать исходный путь ресурса, его URL, его фрагмент манифеста и весь манифест:

use Illuminate\Support\Facades\Vite;

Vite::useScriptTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [
    'data-turbo-track' => $src === 'resources/js/app.js' ? 'reload' : false,
]);

Vite::useStyleTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [
    'data-turbo-track' => $chunk && $chunk['isEntry'] ? 'reload' : false,
]);

Аргументы $chunk и $manifest будут равны null, если сервер разработки Vite запущен.

Расширенная настройка

По умолчанию плагин Vite Laravel использует соглашения, которые должны подходить для большинства приложений; однако иногда вам может потребоваться настроить поведение Vite. Для активации дополнительных параметров настройки мы предлагаем следующие методы и параметры, которые могут использоваться вместо директивы Blade @vite:

<!doctype html>
<head>
    {{-- ... --}}

    {{
        Vite::useHotFile(storage_path('vite.hot')) // Customize the "hot" file...
            ->useBuildDirectory('bundle') // Customize the build directory...
            ->useManifestFilename('assets.json') // Customize the manifest filename...
            ->withEntryPoints(['resources/js/app.js']) // Specify the entry points...
            ->createAssetPathsUsing(function (string $path, ?bool $secure) { // Customize the backend path generation for built assets...
                return "https://cdn.example.com/{$path}";
            })
    }}
</head>

Затем в файле vite.config.js вы должны указать ту же конфигурацию:

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

export default defineConfig({
    plugins: [
        laravel({
            hotFile: 'storage/vite.hot', // Customize the "hot" file...
            buildDirectory: 'bundle', // Customize the build directory...
            input: ['resources/js/app.js'], // Specify the entry points...
        }),
    ],
    build: {
      manifest: 'assets.json', // Customize the manifest filename...
    },
});

Коррекция URL-адресов сервера разработки

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

Например, плагин vite-imagetools выводит URL-адреса, подобные следующим, пока Vite обслуживает ваши ресурсы:

<img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">

Плагин vite-imagetools ожидает, что выходной URL будет перехвачен Vite, и затем плагин сможет обрабатывать все URL-адреса, которые начинаются с /@imagetools. Если вы используете плагины, ожидающие такое поведение, вам придется вручную скорректировать URL-адреса. Вы можете сделать это в вашем файле vite.config.js, используя опцию transformOnServe.

В этом конкретном примере мы добавим префикс URL сервера разработки ко всем вхождениям /@imagetools в сгенерированном коде:

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

export default defineConfig({
    plugins: [
        laravel({
            // ...
            transformOnServe: (code, devServerUrl) => code.replaceAll('/@imagetools', devServerUrl+'/@imagetools'),
        }),
        imagetools(),
    ],
});

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

- <img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520"><!-- [tl! remove] -->
+ <img src="http://[::1]:5173/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520"><!-- [tl! add] -->

Поддержите нас - каждый вклад важен!

Сборка ресурсов (Vite)