アセットの構築（Vite） 10.x Laravel

イントロダクション

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

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

Note: Laravel Mixを実行していますか？新しいLaravelのインストールでは、Laravel MixをViteへ置き換えました。Mixのドキュメントは、Laravel Mixのウェブサイトをご覧ください。Viteに切り替えたい場合は、移行ガイドを参照してください。

ViteとLaravel Mixの選択

Viteへ移行する前、新しいLaravelアプリケーションは、アセットをバンドルする際にwebpackで動作するMixを使用していました。Viteは、リッチなJavaScriptアプリケーションを構築する際に、より速く、より生産的な体験を提供することに重点を置いています。Inertia のようなツールで開発したものを含め、シングルページアプリケーション（SPA）を開発している場合、Viteは完璧にフィットするでしょう。

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

Mixへ戻す

Vite scaffoldingを使用して新しいLaravelアプリケーションを開始したが、Laravel Mixとwebpackへ戻る必要があるのですか？大丈夫です。ViteからMixへの移行に関する公式ガイドを参照してください。

インストールと準備

Note: 以下のドキュメントでは、Laravel Viteプラグインを手作業でインストールし、設定する方法について説明しています。しかし、Laravelのスターターキットには、すでにこのスカフォールドがすべて含まれており、LaravelとViteを始める最速の方法を用意しています。

Nodeのインストール

ViteとLaravelプラグインを実行する前に、Node.js（１６以降）と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',
        ]),
    ],
});

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エントリーポイントなどの高度な設定オプションにも対応しています。

セキュアな開発サーバの取り扱い

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

Laravel Valetをローカル開発に使用しており、アプリケーションでsecureコマンドを実行した場合に、Valetの生成したTLS証明書をVita開発サーバで自動的に使用するように設定できます。

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プラグインをインストールし、設定してください。信頼できない証明書を使用する場合は、npm run devコマンドを実行する際にコンソールの"Local"リンクをたどり、ブラウザからVite開発サーバが出す証明書の警告を受け入れる必要があります。

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

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>
    {{-- 指定するビルドパスは、publicパスからの相対パス --}}

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

Viteの実行

Viteを起動する方法は2つあります。devコマンドで開発サーバを起動するのは、ローカルで開発する際に便利です。開発サーバは、ファイルの変更を自動的に検出し、開いているブラウザウィンドウへ即座に反映させます。

もしくは、buildコマンドを実行すると、アプリケーションのアセットをバージョン付けして構築し、本番環境にデプロイできる状態にします。

# Viteを開発サーバで実行する
npm run dev

# 実働用にアセットをバンドルし、バージョン付けする
npm run build

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: {
                    // Vueプラグインは、Single File Componentsで
                    // 参照する場合、アセットのURLをLaravelのWebサーバを
                    // 指すように書き換えます。
                    // これを`null`に設定すると、Laravelプラグインは
                    // アセットURLをViteサーバを指すように書き換えます。
                    base: null,

                    // Vueプラグインは、絶対URLを解析し、ディスク上のファイルへの
                    // 絶対パスとして扱います。
                    // これを`false`に設定すると、絶対URLはそのままになり、
                    // 期待通りにpublicディレクトリの中で、アセットへ参照できます。
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Note: 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ディレクティブの前に呼び出す必要があります。

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

Note: 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と絶対URLをどのように扱うかを示しています。

<!-- このアセットをViteは扱わず、バンドルへ含まれない -->
<img src="/taylor.png">

<!-- このアセットは書き換えられ、バージョン付けし、バンドルへ含まれる -->
<img src="../../images/abigail.png">

スタイルシートの操作

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

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

Note: Laravelのスターターキットには、最初から適切なTailwind、PostCSS、Viteの構成を用意しています。また、スターターキットを使わずにTailwindとLaravelを使いたい場合は、LaravelのためのTailwindインストールガイドをチェックしてください。

Bladeとルートの操作

Viteによる静的アセットの処理

JavaScriptやCSSのアセットを参照する場合、Viteは自動的に処理し、バージョン付けを行います。また、Bladeベースのアプリケーションを構築する場合、Bladeのテンプレート内だけで参照する静的なアセットもViteで処理し、バージョン付け可能です。

これを実現するには、アプリケーションのエントリポイントで静的アセットをインポートすることにより、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/**

Ziggyを利用して、アプリケーションのフロントエンドでルートリンクを生成する場合、routes/**ディレクトリを監視すると便利です。

これらのデフォルトパスがニーズに合わない場合、監視するパスリストを独自に指定できます。

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アプリケーションでは、定期的に参照するディレクトリにエイリアスを作成することが一般的です。しかし、Illuminate\Support\Facades\Viteクラスのmacroメソッドを使用して、Bladeで使用するエイリアスを作成することもできます。通常、「マクロ」は、サービスプロバイダの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">

ベース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で書き直されないため、プリフィックスが付かないことを覚えておいてください。

環境変数

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

VITE_SENTRY_DSN_PUBLIC=http://example.com

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

import.meta.env.VITE_SENTRY_DSN_PUBLIC

テスト時のVite無効

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

テスト中にViteをモックしたい場合は、LaravelのTestCaseクラスを拡張するすべてのテストで利用できる、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
{
    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エントリポイントの再構築を忘れないようにするために、アプリケーションの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.mjs

Note: Laravelのスターターキットには、すでに適切なLaravel、Inertia SSR、Viteの構成が含まれています。Laravel、Inertia SSR、Viteを最速で使い始めるため、Laravel Breeze をチェックしてください。

Scriptとstyleタグ属性

コンテンツセキュリティポリシー（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
{
    /**
     * 受診リクエストの処理
     *
     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
     */
    public function handle(Request $request, Closure $next, string $role): Response
    {
        Vite::useCspNonce();

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

useCspNonceメソッドが呼び出だされると、Laravelは生成するすべてのscriptタグとstyleタグへ、nonce属性を自動的に含めます。

Laravelのスターターキットに含まれるZiggy @route directiveなど、別の場所でノンスを指定する必要がある場合、cspNonceメソッドを使用して取得できます。

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

Laravelに使わせたいノンスが既にある場合は、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属性を含める必要がある場合は、useScriptTagAttributesとuseStyleTagAttributesメソッドで指定できます。通常、このメソッドはサービスプロバイダから呼び出す必要があります。

use Illuminate\Support\Facades\Vite;

Vite::useScriptTagAttributes([
    'data-turbo-track' => 'reload', // 属性の値を指定
    'async' => true, // 値を指定しない属性
    'integrity' => false, // 本来含まれる属性を除外
]);

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

Warning!! Vite開発サーバが起動している間は、$chunkと$manifest引数は、nullになります。

高度なカスタマイズ

LaravelのViteプラグインは、ほとんどのアプリケーションで動作するように、合理的な規約をはじめから使用しています。しかし、時にはViteの動作をカスタマイズする必要が起きるかもしれません。追加のカスタマイズオプションを有効にするための、@vite Bladeディレクティブの代わりに使用可能な、以下のメソッドとオプションを提供しています。

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

    {{
        Vite::useHotFile(storage_path('vite.hot')) // 「ホット」なファイルのカスタマイズ
            ->useBuildDirectory('bundle') // ビルドディレクトリのカスタマイズ
            ->useManifestFilename('assets.json') // マニフェストファイル名のカスタマイズ
            ->withEntryPoints(['resources/js/app.js']) // エントリポイントの指定
    }}
</head>

そして、vite.config.jsファイル内でも、同じ設定を指定する必要があります。

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

export default defineConfig({
    plugins: [
        laravel({
            hotFile: 'storage/vite.hot', // 「ホット」なファイルのカスタマイズ
            buildDirectory: 'bundle', // ビルドディレクトリのカスタマイズ
            input: ['resources/js/app.js'], // エントリポイントの指定
        }),
    ],
    build: {
      manifest: 'assets.json', // マニフェストファイル名のカスタマイズ
    },
});

開発サーバ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] -->

Laravel 10.x アセットの構築（Vite）

イントロダクション

ViteとLaravel Mixの選択

Mixへ戻す

インストールと準備

Nodeのインストール

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

Viteの設定

セキュアな開発サーバの取り扱い

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

Viteの実行

JavaScriptの操作

エイリアス

Vue

React

Inertia

URL処理

スタイルシートの操作

Bladeとルートの操作

Viteによる静的アセットの処理

保存時の再描写

エイリアス

ベースURLのカスタマイズ

環境変数

テスト時のVite無効

サーバサイドレンダリング(SSR)

Scriptとstyleタグ属性

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

サブリソース完全性（SRI）

任意の属性

高度なカスタマイズ

開発サーバURLの修正

ドキュメント章別ページ

ヘッダー項目移動

移動

設定

キーボード・ショートカット

オープン操作

ヘッダー移動

その他