イントロダクション
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(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',
]),
],
});
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 Herdを使用していて、サイトをセキュアにしている場合、またはLaravel Valetを使用して、アプリケーションでsecureコマンドを実行している場合、生成したTLS証明書を自動的に使用するようにVite開発サーバを設定できます:
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()
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>
インラインのアセット
時には、アセットでバージョン管理したURLへリンクするのではなく、アセットの素のコンテンツを含める必要があるかもしれません。例えば、HTMLコンテンツをPDFジェネレータに渡すときに、アセットコンテンツを直接ページに含める必要があるかもしれません。Vite
ファサードが提供するcontent
メソッドを使用して、Viteアセットのコンテンツを出力できます。
@php
use Illuminate\Support\Facades\Vite;
@endphp
<!doctype html>
<head>
{{-- ... --}}
<script>
{!! Vite::content('resources/js/app.js') !!}
</script>
</head>
Viteの実行
Viteを起動する方法は2つあります。dev
コマンドで開発サーバを起動するのは、ローカルで開発する際に便利です。開発サーバは、ファイルの変更を自動的に検出し、開いているブラウザウィンドウへ即座に反映させます。
もしくは、build
コマンドを実行すると、アプリケーションのアセットをバージョン付けして構築し、本番環境にデプロイできる状態にします。
# Viteを開発サーバで実行する
npm run dev
# 実働用にアセットをバンドルし、バージョン付けする
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: {
// 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
が自動的にそれを適用してくれます。
export default {
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.js
SSRをInertiaで使用している場合、代わりにinertia:start-ssr
Artisanコマンドを使用してSSRサーバを起動してください。
php artisan inertia:start-ssr
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): 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を前へ追加します。
この例では、生成したコード内で、/@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] -->