Документация Laravel 10.x
Здесь ты найдешь сниппеты по Laravel и полезные советы по веб-разработке.
Vite - современный инструмент сборки фронтенда, который обеспечивает чрезвычайно быстрое окружение разработки и упаковывает ваш код для продакшна. При построении приложений с использованием Laravel вы обычно используете Vite для упаковки CSS и JavaScript файлов вашего приложения в готовые к продакшн ресурсы.
Laravel интегрируется беспрепятственно с Vite, предоставляя официальный плагин и директиву Blade для загрузки ваших ресурсов в режиме разработки и продакшна.
Примечание Вы используете Laravel Mix? Vite заменил Laravel Mix в новых установках Laravel. Для документации Mix посетите веб-сайт Laravel Mix. Если вы хотите перейти на Vite, ознакомьтесь с нашим руководством по миграции.
Прежде чем перейти к Vite, новые приложения Laravel использовали Mix, который работает на webpack, для упаковки ресурсов. Vite фокусируется на предоставлении более быстрого и продуктивного опыта при построении сложных JavaScript-приложений. Если вы разрабатываете Single Page Application (SPA), включая те, которые разрабатываются с использованием инструментов, таких как Inertia, Vite будет отличным выбором.
Vite также хорошо работает с традиционными серверными приложениями с примесью JavaScript, включая те, которые используют Livewire. Однако ему не хватает некоторых функций, которые поддерживает Laravel Mix, таких как возможность копирования произвольных ресурсов в сборку, которые не прямо ссылается ваше JavaScript-приложение.
Вы начали новое приложение Laravel, используя нашу структуру Vite, но хотите вернуться к Laravel Mix и webpack? Нет проблем. Пожалуйста, ознакомьтесь с официальным руководством по миграции с Vite на Mix.
Примечание Документация ниже рассматривает вопросы по ручной установке и настройке плагина Laravel Vite. Однако стартовые комплекты Laravel уже включают в себя всю эту структуру и являются самым быстрым способом начать работу с Laravel и Vite.
Вы должны убедиться, что Node.js (16+) и NPM установлены перед запуском Vite и плагина Laravel:
node -vnpm -v
Вы можете легко установить последнюю версию Node и NPM с использованием простых графических установщиков с официального сайта Node. Или, если вы используете Laravel Sail, вы можете вызвать Node и NPM через Sail:
./vendor/bin/sail node -v./vendor/bin/sail npm -v
В новой установке Laravel вы найдете файл package.json
в корне структуры каталогов вашего приложения. В файле package.json
уже содержится все необходимое для начала использования Vite и плагина Laravel. Вы можете установить зависимости вашего фронтенда с помощью NPM:
npm install
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', 'resources/js/app.js', ]), ],});
Вместо этого вы должны импортировать свой CSS через JavaScript. Обычно это делается в файле resources/js/app.js
вашего приложения:
import './bootstrap';import '../css/app.css';
Плагин Laravel также поддерживает несколько точек входа и расширенные опции конфигурации, такие как SSR точки входа.
Если ваш локальный веб-сервер разработки обслуживает ваше приложение через HTTPS, могут возникнуть проблемы с подключением к серверу разработки Vite.
Если вы используете Laravel Herd и обеспечили безопасность сайта или используете Laravel Valet и выполнили команду по обеспечению безопасности для вашего приложения, вы можете настроить сервер разработки Vite для автоматического использования сгенерированных сертификатов TLS:
import { defineConfig } from 'vite';import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel({ // ... detectTls: 'my-app.test', }), ],});
При использовании другого веб-сервера вы должны создать доверенный сертификат и вручную настроить Vite для использования сгенерированных сертификатов:
// ...import fs from 'fs'; const host = 'my-app.test'; export default defineConfig({ // ... server: { host, hmr: { host }, https: { key: fs.readFileSync(`/path/to/${host}.key`), cert: fs.readFileSync(`/path/to/${host}.crt`), }, }, });
Если у вас не удается создать доверенный сертификат для вашей системы, вы можете установить и настроить плагин @vitejs/plugin-basic-ssl
. При использовании недоверенных сертификатов вам придется принять предупреждение о сертификате для сервера разработки Vite в вашем браузере, следуя ссылке "Local" в вашей консоли при выполнении команды npm run dev
.
При запуске сервера разработки Vite в Laravel Sail в Windows Subsystem for Linux 2 (WSL2) вы должны добавить следующую конфигурацию в ваш файл vite.config.js
, чтобы обеспечить связь браузера с сервером разработки:
// ... export default defineConfig({ // ... server: { hmr: { host: 'localhost', }, }, });
Если изменения ваших файлов не отображаются в браузере при работе сервера разработки, вам также может потребоваться настроить опцию server.watch.usePolling
Vite.
С настроенными точками входа Vite теперь вы можете ссылаться на них с помощью директивы Blade @vite()
, которую вы добавляете в <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
:
@phpuse 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. Вы можете запустить сервер разработки с помощью команды dev
, которая полезна при локальной разработке. Сервер разработки автоматически обнаруживает изменения в ваших файлах и мгновенно отображает их в любых открытых окнах браузера.
Или, выполнение команды build
приведет к версии и упаковке ресурсов вашего приложения и подготовке их к развертыванию в производстве:
# Run the Vite development server...npm run dev # Build and version the assets for production...npm run build
Если вы запускаете сервер разработки в Sail на WSL2, вам может потребоваться несколько дополнительных параметров конфигурации.
По умолчанию плагин 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, вам также нужно установить плагин @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-адреса нетронутыми, чтобы они могли // ссылаться на ресурсы в общедоступном каталоге, как и ожидалось. includeAbsolute: false, }, }, }), ],});
Примечание В стартовых комплектах Laravel уже предусмотрена правильная конфигурация Laravel, Vue и Vite. Ознакомьтесь с Laravel Breeze для самого быстрого старта с Laravel, Vue и Vite.
Если вы хотите построить свой фронтенд, используя фреймворк 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
.
@viteReactRefresh@vite('resources/js/app.jsx')
Директиву @viteReactRefresh
необходимо вызывать перед директивой @vite
.
Примечание В стартовых комплектах Laravel уже предусмотрена правильная конфигурация Laravel, React и Vite. Ознакомьтесь с Laravel Breeze для самого быстрого старта с Laravel, React и Vite.
Плагин 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 уже предусмотрена правильная конфигурация Laravel, Inertia и Vite. Ознакомьтесь с Laravel Breeze для самого быстрого старта с Laravel, Inertia и Vite.
При использовании Vite и ссылках на ресурсы в HTML, CSS или JS вашего приложения, есть несколько моментов, которые следует учесть. Во-первых, если вы ссылаетесь на ресурсы с абсолютным путем, Vite не включит ресурс в сборку; поэтому вы должны убедиться, что ресурс доступен в вашем общедоступном каталоге.
При ссылке на относительные пути к ресурсам следует помнить, что пути относительны к файлу, в котором они ссылкаются. Любые ресурсы, на которые ссылаются с относительным путем, будут переписаны, версированы и упакованы Vite.
Рассмотрим следующую структуру проекта:
public/ taylor.pngresources/ js/ Pages/ Welcome.vue images/ abigail.png
В следующем примере показано, как Vite будет обрабатывать относительные и абсолютные URL-адреса:
<!-- This asset is not handled by Vite and will not be included in the build --><img src="/taylor.png"> <!-- This asset will be re-written, versioned, and bundled by Vite --><img src="../../images/abigail.png">
Вы можете узнать больше о поддержке CSS в Vite в документации Vite. Если вы используете плагины PostCSS, такие как Tailwind, вы можете создать файл postcss.config.js
в корне вашего проекта, и Vite автоматически применит его:
export default { plugins: { tailwindcss: {}, autoprefixer: {}, },};
Примечание В стартовых комплектах Laravel уже предусмотрена правильная конфигурация Tailwind, PostCSS и Vite. Или, если вы хотите использовать Tailwind и Laravel без использования одного из наших стартовых комплектов, ознакомьтесь с руководством по установке Tailwind для Laravel.
При ссылке на ресурсы в вашем 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
поставщика услуг:
/** * Запуск любых служб приложения. */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">
Если ваши скомпилированные ресурсы 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 в 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 { parent::setUp(); $this->withoutVite(); }}
Плагин 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" "build": "vite build && vite build --ssr" }
Затем для построения и запуска сервера SSR вы можете выполнить следующие команды:
npm run buildnode bootstrap/ssr/ssr.js
Если вы используете SSR с Inertia, вы можете вместо этого использовать команду Artisan inertia:start-ssr
для запуска сервера SSR:
php artisan inertia:start-ssr
Примечание В стартовых комплектах Laravel уже предусмотрена правильная конфигурация Laravel, Inertia SSR и Vite. Ознакомьтесь с Laravel Breeze для самого быстрого старта с Laravel, Inertia SSR и Vite.
Если вы хотите включить атрибут nonce
на ваши теги script и style в рамках вашей Content Security Policy, вы можете создать или указать nonce, используя метод useCspNonce
в пользовательском промежуточном ПО:
<?php namespace App\Http\Middleware; use Closure;use Illuminate\Http\Request;use Illuminate\Support\Facades\Vite;use Symfony\Component\HttpFoundation\Response; class AddContentSecurityPolicyHeaders{ /** * Обработка входящего запроса. * * @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, который вы хотите использовать, вы можете передать nonce методу useCspNonce
:
Vite::useCspNonce($nonce);
Если в вашем манифесте Vite присутствуют хеши integrity
для ваших ресурсов, Laravel автоматически добавит атрибут integrity
ко всем созданным тегам script и style для обеспечения Subresource Integrity. По умолчанию Vite не включает хеш integrity
в свой манифест, но вы можете включить его, установив плагин NPM vite-plugin-manifest-sri
:
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'; export default defineConfig({ plugins: [ laravel({ // ... }), manifestSRI(), ],});
При необходимости вы также можете настроить ключ манифеста, где можно найти хеш integrity:
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... }}</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... },});
Некоторые плагины в экосистеме 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">+ <img src="http://[::1]:5173/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">