アセットのバンドリング（Vite）

はじめに

Viteは、非常に高速な開発環境を提供し、コードを本番用にバンドルする現代的なフロントエンドビルドツールです。Laravelでアプリケーションを構築する際には、通常、Viteを使用してアプリケーションのCSSやJavaScriptファイルを本番用のアセットにバンドルします。

Laravelは、公式のプラグインとBladeディレクティブを提供することで、Viteとシームレスに統合され、開発および本番用のアセットを読み込むことができます。

注記

Laravel Mixを使用していますか？ Viteは新しいLaravelインストールでLaravel Mixの代わりになりました。Mixのドキュメントについては、Laravel Mixのウェブサイトをご覧ください。Viteに切り替えたい場合は、移行ガイドをご覧ください。

ViteとLaravel Mixの選択

Viteに移行する前に、新しいLaravelアプリケーションは、アセットをバンドルする際にwebpackを利用している Mixを使用していました。 Viteは、豊かなJavaScriptアプリケーションを構築する際に、より高速で生産性の高いエクスペリエンスを提供することに焦点を当てています。 Inertiaなどのツールで開発されたSPA（Single Page Application）を含む場合、Viteが最適です。

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

Mixに戻る

Viteのスキャフォールディングを使用して新しいLaravelアプリケーションを開始しましたが、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を使用している場合は、Sailを介してNodeとNPMを呼び出すことができます：

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

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

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

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

安全な開発サーバーでの作業

ローカル開発Webサーバーが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]
        }),
    ],
});

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

WSL2のSailでの開発サーバーの実行

Windows Subsystem for Linux 2（WSL2）内のLaravel SailでVite開発サーバーを実行する場合は、ブラウザが開発サーバーと通信できるようにするために、vite.config.jsファイルに以下の構成を追加する必要があります：

// ...

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

開発サーバーが実行されている間にファイルの変更がブラウザに反映されない場合は、Viteのserver.watch.usePollingオプションを構成する必要があるかもしれません。

スクリプトとスタイルの読み込み

Viteエントリーポイントが構成されたら、アプリケーションのルートテンプレートの<head>に追加する@vite()ブレードディレクティブでそれらを参照できます：

<!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クライアントを注入してHot Module Replacementを有効にします。ビルドモードでは、ディレクティブはコンパイルされたバージョン管理されたアセットをロードし、インポートされた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アセットのコンテンツを出力できます：

@use('Illuminate\Support\Facades\Vite')

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

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

Viteの実行

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

または、buildコマンドを実行すると、アプリケーションのアセットがバージョン管理され、バンドルされ、本番環境へのデプロイの準備が整います：

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

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

WSL2でSailの開発サーバーを実行している場合は、追加の構成オプションが必要になる場合があります。

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構成ファイルにプラグインを含めることができます。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のスターターキットには、適切な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拡張子が必要であり、必要に応じてエントリーポイントを更新する必要があります。上記のように。

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

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

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

注記

Laravelのスターターキットには、適切な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のスターターキットには、適切なLaravel、Inertia、およびVite構成がすでに含まれています。Laravel、Inertia、およびViteを素早く始める方法として、Laravel Breezeをチェックしてください。

URL処理

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

相対アセットパスを参照する場合は、それらが参照されているファイルに対して相対的であることを覚えておく必要があります。相対パスを介して参照されるアセットは、Viteによって書き換えられ、バージョン管理され、バンドルされます。

考えられるプロジェクト構造は次のとおりです：

public/
  taylor.png
resources/
  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">

スタイルシートの操作

Viteのドキュメント内でViteのCSSサポートについて詳しく学ぶことができます。TailwindなどのPostCSSプラグインを使用している場合は、プロジェクトのルートにpostcss.config.jsファイルを作成すると、Viteが自動的に適用されます：

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

注記

Laravelのスターターキットには、適切なTailwind、PostCSS、およびViteの設定がすでに含まれています。また、スターターキットを使用せずにTailwindとLaravelを使用したい場合は、Laravel用Tailwindのインストールガイドを参照してください。

Bladeとルートの操作

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によって処理されます。その後、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で使用する別名を作成する場合は、Illuminate\Support\Facades\Viteクラスのmacroメソッドを使用して別名を作成することもできます。通常、"マクロ"は、サービスプロバイダの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経由など）にデプロイされる場合、アプリケーションの.envファイル内でASSET_URL環境変数を指定する必要があります：

ASSET_URL=https://cdn.example.com

アセットURLを設定した後、アセットへの再書き込みURLは設定された値で接頭辞が付けられます：

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

絶対URLはViteによって再書き込まれないため、接頭辞が付けられません。

環境変数

JavaScriptに環境変数を注入するには、アプリケーションの.envファイルでVITE_を接頭辞として付けることができます：

VITE_SENTRY_DSN_PUBLIC=http://example.com

注入された環境変数には、import.meta.envオブジェクトを介してアクセスできます：

import.meta.env.VITE_SENTRY_DSN_PUBLIC

テスト中のViteの無効化

LaravelのVite統合は、テストを実行する際にアセットを解決しようとします。これにはVite開発サーバーを実行するかアセットをビルドする必要があります。

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

test('without vite example', function () {
    $this->withoutVite();

    // ...
});

use Tests\TestCase;

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

        // ...
    }
}

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

<?php

namespace Tests;

use Illuminate\Foundation\Testing\TestCase as BaseTestCase;

abstract class TestCase extends BaseTestCase
{
    protected function setUp(): void// [tl! add:start]
    {
        parent::setUp();

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

サーバーサイドレンダリング（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の「build」スクリプトを拡張して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

Inertiaを使用したSSRを行っている場合は、代わりにinertia:start-ssr Artisanコマンドを使用してSSRサーバーを起動できます。

php artisan inertia:start-ssr

注記

Laravelのスターターキットには、適切なLaravel、Inertia SSR、およびViteの構成がすでに含まれています。Laravel、Inertia SSR、およびViteをすばやく始めるための最速の方法であるLaravel Breezeをチェックしてください。

スクリプトとスタイルの属性

コンテンツセキュリティポリシー（CSP）ノンス

スクリプトとスタイルタグに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
{
    /**
     * 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属性を含めます。

他の場所でノンスを指定する必要がある場合、Laravelのスターターキットに含まれるZiggy @routeディレクティブを含めることができ、cspNonceメソッドを使用してそれを取得できます：

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

すでに使用したいノンスがある場合は、そのノンスをuseCspNonceメソッドに渡すことができます：

Vite::useCspNonce($nonce);

サブリソース整合性（SRI）

Viteのマニフェストにアセットのintegrityハッシュが含まれている場合、Laravelはサブリソース整合性を強制するために生成されるすべてのスクリプトとスタイルタグに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');

この自動検出を完全に無効にしたい場合は、useIntegrityKey メソッドに false を渡すことができます：

Vite::useIntegrityKey(false);

任意の属性

スクリプトやスタイルタグに追加の属性を含める必要がある場合、data-turbo-track 属性などを指定することができます。これらのメソッドは通常、サービスプロバイダから呼び出されるべきです：

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 になります。

高度なカスタマイズ

デフォルトでは、Laravel の Vite プラグインは、ほとんどのアプリケーションで機能するはずの慎重な規則を使用しています。ただし、Vite の動作をカスタマイズする必要がある場合があります。追加のカスタマイズオプションを有効にするために、@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 プラグインは、Vite がアセットを提供している間に次のような URL を出力します：

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

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

この具体的な例では、生成されたコード内の /@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] -->

アセットのバンドリング（Vite）

はじめに​

ViteとLaravel Mixの選択​

Mixに戻る​

インストールとセットアップ​

Nodeのインストール​

ViteとLaravelプラグインのインストール​

Viteの設定​

安全な開発サーバーでの作業​

WSL2のSailでの開発サーバーの実行​

スクリプトとスタイルの読み込み​

インラインアセット​

Viteの実行​

JavaScriptの操作​

エイリアス​

Vue​

React​

Inertia​

URL処理​

スタイルシートの操作​

Bladeとルートの操作​

Viteを使用した静的アセットの処理​

保存時のリフレッシュ​

別名​

カスタムベースURL​

環境変数​

テスト中のViteの無効化​

サーバーサイドレンダリング（SSR）​

スクリプトとスタイルの属性​

コンテンツセキュリティポリシー（CSP）ノンス​

サブリソース整合性（SRI）​

任意の属性​

高度なカスタマイズ​

開発サーバーの URL の修正​