バージョン: 9.x

Asset Bundling (Vite)

Introduction
Installation & Setup
Running Vite
Working With JavaScript
- Aliases
- Vue
- React
- Inertia
- URL Processing
Working With Stylesheets
Working With Blade & Routes
Custom Base URLs
Environment Variables
Disabling Vite In Tests
Server-Side Rendering (SSR)
Script & Style Tag Attributes
Advanced Customization
- Correcting Dev Server URLs

Introduction

Vite は、非常に高速な開発環境を提供し、実稼働用のコードをバンドルする最新のフロントエンドビルドツールです。 Laravel でアプリケーションを構築する場合、通常は Vite を使用して、アプリケーションの CSS ファイルと JavaScript ファイルを本番環境に対応したアセットにバンドルします。

Laravel は、開発および本番用にアセットをロードするための公式プラグインと Blade ディレクティブを提供することで、Vite とシームレスに統合します。

Laravel Mix を実行していますか? Vite は、新しい Laravel インストールで Laravel Mix を置き換えました。 Mix のドキュメントについては、Laravel Mix Web サイトをご覧ください。 Vite に切り替えたい場合は、migration guide をご覧ください。

Choosing Between Vite And Laravel Mix

Vite に移行する前、新しい Laravel アプリケーションは、アセットをバンドルするときに Mix を利用する webpack を利用していました。 Vite は、リッチな JavaScript アプリケーションを構築する際に、より高速で生産性の高いエクスペリエンスを提供することに重点を置いています。 Inertia などのツールで開発されたものを含め、シングルページアプリケーション (SPA) を開発している場合は、Vite が最適です。

Vite は、Livewire を使用するアプリケーションなど、JavaScript の「スプリンクル」を使用した従来のサーバーサイドでレンダリングされたアプリケーションでも適切に動作します。ただし、JavaScript アプリケーションで直接参照されない任意のアセットをビルドにコピーする機能など、Laravel Mix がサポートするいくつかの機能が欠けています。

Migrating Back To Mix

Vite スキャフォールディングを使用して新しい Laravel アプリケーションを開始しましたが、Laravel Mix と webpack に戻る必要がありますか?問題ない。 official guide on migrating from Vite to Mix にご相談ください。

Installation & Setup

次のドキュメントでは、Laravel Vite プラグインを手動でインストールして構成する方法について説明します。ただし、Laravel の starter kits にはこのスキャフォールディングがすべて含まれており、Laravel と Vite を始めるための最速の方法です。

Installing Node

Vite と Laravel プラグインを実行する前に、Node.js (16+) と NPM がインストールされていることを確認する必要があります。

node -v
npm -v

the official Node website のシンプルなグラフィカルインストーラーを使用して、Node と NPM の最新バージョンを簡単にインストールできます。または、Laravel Sail を使用している場合は、Sail を通じて Node と NPM を呼び出すことができます。

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

Installing Vite And The Laravel Plugin

Laravel を新規インストールすると、アプリケーションのディレクトリ構造のルートに package.json ファイルが見つかります。デフォルトの package.json ファイルには、Vite と Laravel プラグインの使用を開始するために必要なものがすべて含まれています。 NPM 経由でアプリケーションのフロントエンド依存関係をインストールできます。

npm install

Configuring 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',
        ]),
    ],
});

Inertia を使用して構築されたアプリケーションを含む SPA を構築している場合、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',
        ]),
    ],
});

代わりに、JavaScript 経由で CSS をインポートする必要があります。通常、これはアプリケーションの resources/js/app.js ファイルで行われます。

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

Laravel プラグインは、複数のエントリポイントと SSR entry points などの高度な構成オプションもサポートしています。

Working With A Secure Development Server

ローカル開発 Web サーバーが HTTPS 経由でアプリケーションを提供している場合、Vite 開発サーバーへの接続で問題が発生する可能性があります。

ローカル開発に Laravel Valet を使用しており、アプリケーションに対して secure command を実行している場合は、Valet が生成した TLS 証明書を自動的に使用するように Vite 開発サーバーを構成できます。

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

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

別の Web サーバーを使用する場合は、信頼できる証明書を生成し、生成された証明書を使用するように 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 plugin をインストールして構成できます。信頼できない証明書を使用する場合は、npm run dev コマンドの実行時にコンソールの「ローカル」リンクをクリックして、ブラウザーで Vite 開発サーバーに対する証明書の警告を受け入れる必要があります。

Loading Your Scripts And Styles

Vite エントリポイントを設定したら、アプリケーションのルートテンプレートの <head> に追加する @vite() Blade ディレクティブでそれらを参照するだけで済みます。

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

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

JavaScript 経由で CSS をインポートする場合、含める必要があるのは 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>

Running Vite

Vite を実行するには 2 つの方法があります。 dev コマンドを使用して開発サーバーを実行できます。これは、ローカルで開発する場合に便利です。開発サーバーはファイルへの変更を自動的に検出し、開いているブラウザウィンドウに即座に変更を反映します。

または、build コマンドを実行すると、アプリケーションのアセットがバージョン管理されてバンドルされ、運用環境にデプロイできるようになります。

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

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

Working With JavaScript

Aliases

デフォルトでは、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 構成ファイルにプラグインを含めることができます。 Laravel で Vue プラグインを使用する場合、必要となる追加オプションがいくつかあります。

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: {
                    // The Vue plugin will re-write asset URLs, when referenced
                    // in Single File Components, to point to the Laravel web
                    // server. Setting this to `null` allows the Laravel plugin
                    // to instead re-write asset URLs to point to the Vite
                    // server instead.
                    base: null,

                    // The Vue plugin will parse absolute URLs and treat them
                    // as absolute paths to files on disk. Setting this to
                    // `false` will leave absolute URLs un-touched so they can
                    // reference assets in the public directory as expected.
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Laravel の starter kits には、適切な Laravel、Vue、および Vite 構成がすでに含まれています。 Laravel、Vue、Vite を始める最速の方法については、Laravel Breeze をチェックしてください。

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 拡張子が付いていることを確認する必要があります。必要に応じて、エントリポイントを shown above として更新することを忘れないでください。

既存の @vite ディレクティブと一緒に、追加の @viteReactRefresh Blade ディレクティブを含める必要もあります。

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

@viteReactRefresh ディレクティブは、@vite ディレクティブの前に呼び出す必要があります。

Laravel の starter kits には、適切な Laravel、React、および Vite 構成がすでに含まれています。 Laravel、React、Vite を最も早く始める方法については、Laravel Breeze をチェックしてください。

Inertia

Laravel Vite プラグインは、Inertia ページコンポーネントの解決に役立つ便利な resolvePageComponent 関数を提供します。以下は、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、Inertia、Vite を最速で始める方法については、Laravel Breeze をチェックしてください。

URL Processing

Vite を使用し、アプリケーションの HTML、CSS、または JS でアセットを参照する場合、考慮すべき注意事項がいくつかあります。まず、絶対パスでアセットを参照すると、Vite はビルドにアセットを含めません。したがって、アセットがパブリックディレクトリで利用可能であることを確認する必要があります。

相対アセットパスを参照する場合、パスは参照先のファイルからの相対パスであることに注意してください。相対パス経由で参照されるアセットはすべて、Vite によって書き換えられ、バージョン管理され、バンドルされます。

次のプロジェクト構造を考えてみましょう。

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

次の例は、Vite が相対 URL と絶対 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">

Working With Stylesheets

Vite の CSS サポートについて詳しくは、Vite documentation をご覧ください。 Tailwind などの PostCSS プラグインを使用している場合は、プロジェクトのルートに postcss.config.js ファイルを作成すると、Vite がそれを自動的に適用します。

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

Working With Blade & Routes

Processing Static Assets With Vite

JavaScript または CSS でアセットを参照すると、Vite はそれらを自動的に処理してバージョン付けします。さらに、Blade ベースのアプリケーションを構築する場合、Vite は Blade テンプレート内でのみ参照する静的アセットを処理およびバージョン管理することもできます。

ただし、これを実現するには、静的アセットをアプリケーションのエントリポイントにインポートして、Vite にアセットを認識させる必要があります。たとえば、resources/images に保存されているすべての画像と resources/fonts に保存されているすべてのフォントを処理してバージョン管理する場合は、アプリケーションの resources/js/app.js エントリポイントに次の行を追加する必要があります。

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

これらのアセットは、npm run build の実行時に Vite によって処理されるようになります。その後、Vite::asset メソッドを使用してBlade テンプレートでこれらのアセットを参照できます。これにより、特定のアセットのバージョン管理された URL が返されます。

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

Refreshing On Save

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 }
            }],
        }),
    ],
});

Aliases

JavaScript アプリケーションでは、定期的に参照されるディレクトリに対して create aliases を行うのが一般的です。ただし、Illuminate\Support\Facades\Vite クラスの macro メソッドを使用して、Blade で使用するエイリアスを作成することもできます。通常、「マクロ」は service provider の boot メソッド内で定義する必要があります。

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

マクロを定義すると、テンプレート内でマクロを呼び出すことができます。たとえば、上で定義した image マクロを使用して、resources/images/logo.png にあるアセットを参照できます。

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

Custom Base URLs

Vite コンパイル済みアセットが CDN 経由など、アプリケーションとは別のドメインにデプロイされている場合は、アプリケーションの .env ファイル内で ASSET_URL 環境変数を指定する必要があります。

ASSET_URL=https://cdn.example.com

アセット URL を構成すると、アセットへのすべての書き換えられた URL には、構成された値がプレフィックスとして付加されます。

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

absolute URLs are not re-written by Vite であるため、プレフィックスは付けられないことに注意してください。

Environment Variables

アプリケーションの .env ファイル内で環境変数に VITE_ というプレフィックスを付けることで、JavaScript に環境変数を挿入できます。

VITE_SENTRY_DSN_PUBLIC=http://example.com

挿入された環境変数には、import.meta.env オブジェクト経由でアクセスできます。

import.meta.env.VITE_SENTRY_DSN_PUBLIC

Disabling Vite In Tests

Laravel の Vite 統合では、テストの実行中にアセットの解決が試行されるため、Vite 開発サーバーを実行するか、アセットを構築する必要があります。

テスト中に Vite をモックしたい場合は、Laravel の TestCase クラスを拡張するあらゆるテストで利用できる withoutVite メソッドを呼び出すことができます。

use Tests\TestCase;

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

        // ...
    }
}

すべてのテストで Vite を無効にしたい場合は、基本 TestCase クラスの setUp メソッドから withoutVite メソッドを呼び出すことができます。

<?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]
}

Server-Side Rendering (SSR)

Laravel Vite プラグインを使用すると、Vite でのサーバー側レンダリングのセットアップが簡単になります。まず、resources/js/ssr.js で SSR エントリポイントを作成し、構成オプションを 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 エントリポイントの再構築を忘れないようにするために、アプリケーションの 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.mjs

Laravel の starter kits には、適切な Laravel、Inertia SSR、および Vite 構成がすでに含まれています。 Laravel、Inertia SSR、Vite を始める最速の方法については、Laravel Breeze をチェックしてください。

Script & Style Tag Attributes

Content Security Policy (CSP) Nonce

スクリプトとスタイルタグに nonce attribute の一部として Content Security Policy を含めたい場合は、カスタム middleware 内で useCspNonce メソッドを使用してノンスを生成または指定できます。

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Support\Facades\Vite;

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

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

useCspNonce メソッドを呼び出した後、Laravel は生成されたすべてのスクリプトタグとスタイルタグに nonce 属性を自動的に含めます。

Laravel の Ziggy @route directive に含まれる starter kits など、他の場所で nonce を指定する必要がある場合は、 cspNonce メソッドを使用して取得できます。

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

Laravel に使用するように指示したい nonce がすでにある場合は、その nonce を useCspNonce メソッドに渡すことができます。

Vite::useCspNonce($nonce);

Subresource Integrity (SRI)

Vite マニフェストにアセットの integrity ハッシュが含まれている場合、Laravel は Subresource Integrity を強制するために、生成するスクリプトとスタイルタグに integrity 属性を自動的に追加します。デフォルトでは、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);

Arbitrary Attributes

スクリプトおよびスタイルタグに data-turbo-track 属性などの追加の属性を含める必要がある場合は、useScriptTagAttributes および useStyleTagAttributes メソッドを使用して指定できます。通常、このメソッドは service provider から呼び出す必要があります。

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,
]);

Vite 開発サーバーの実行中、$chunk および $manifest 引数は null になります。

Advanced Customization

Laravel の Vite プラグインは、そのままの状態で、ほとんどのアプリケーションで機能する賢明な規則を使用しています。ただし、Vite の動作をカスタマイズする必要がある場合があります。追加のカスタマイズオプションを有効にするために、@vite Blade ディレクティブの代わりに使用できる次のメソッドとオプションが提供されています。

<!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...
    },
});

Correcting Dev Server URLs

Vite エコシステム内の一部のプラグインは、スラッシュで始まる URL が常に Vite dev サーバーを指すことを前提としています。ただし、Laravel 統合の性質により、これは当てはまりません。

たとえば、vite-imagetools プラグインは、Vite がアセットを提供しているときに次のような URL を出力します。

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

vite-imagetools プラグインは、出力 URL が Vite によってインターセプトされることを予期しており、プラグインは /@imagetools で始まるすべての URL を処理する可能性があります。この動作を想定しているプラグインを使用している場合は、URL を手動で修正する必要があります。これは、transformOnServe オプションを使用して、vite.config.js ファイルで行うことができます。

この特定の例では、生成されたコード内のすべての /@imagetools に開発サーバー URL を追加します。

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 がアセットを提供している間、Vite 開発サーバーを指す URL が出力されます。

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

Introduction​

Choosing Between Vite And Laravel Mix​

Migrating Back To Mix​

Installation & Setup​

Installing Node​

Installing Vite And The Laravel Plugin​

Configuring Vite​

Working With A Secure Development Server​

Loading Your Scripts And Styles​

Running Vite​

Working With JavaScript​

Aliases​

Vue​

React​

Inertia​

URL Processing​

Working With Stylesheets​

Working With Blade & Routes​

Processing Static Assets With Vite​

Refreshing On Save​

Aliases​

Custom Base URLs​

Environment Variables​

Disabling Vite In Tests​

Server-Side Rendering (SSR)​

Script & Style Tag Attributes​

Content Security Policy (CSP) Nonce​

Subresource Integrity (SRI)​

Arbitrary Attributes​

Advanced Customization​

Correcting Dev Server URLs​

Introduction

Choosing Between Vite And Laravel Mix

Migrating Back To Mix

Installation & Setup

Installing Node

Installing Vite And The Laravel Plugin

Configuring Vite

Working With A Secure Development Server

Loading Your Scripts And Styles

Running Vite

Working With JavaScript

Aliases

Vue

React

Inertia

URL Processing

Working With Stylesheets

Working With Blade & Routes

Processing Static Assets With Vite

Refreshing On Save

Aliases

Custom Base URLs

Environment Variables

Disabling Vite In Tests

Server-Side Rendering (SSR)

Script & Style Tag Attributes

Content Security Policy (CSP) Nonce

Subresource Integrity (SRI)

Arbitrary Attributes

Advanced Customization

Correcting Dev Server URLs