- はじめに
- インストールとセットアップ
- Viteの実行
- JavaScriptの操作
- スタイルシートの操作
- Bladeとルートの操作
- カスタムベースURL
- 環境変数
- テストでのVite無効化
- サーバーサイドレンダリング（SSR）
- スクリプトとスタイルタグの属性
- 高度なカスタマイズ
#はじめに
Vite は、非常に高速な開発環境を提供し、コードを本番用にバンドルするモダンなフロントエンドビルドツールです。Laravelでアプリケーションを構築する際は、通常、Viteを使ってアプリケーションのCSSやJavaScriptファイルを本番用のアセットにバンドルします。
Laravelは公式プラグインとBladeディレクティブを提供し、開発時と本番時のアセット読み込みをシームレスに統合しています。
Laravel Mixを使っていますか？新しいLaravelインストールではViteがLaravel Mixに置き換わっています。MixのドキュメントはLaravel Mixの公式サイトをご覧ください。Viteに切り替えたい場合は、マイグレーションガイドを参照してください。
#ViteとLaravel Mixの選択
Viteに移行する前は、新しいLaravelアプリケーションでアセットをバンドルする際に、webpackをベースにしたMixが使われていました。ViteはリッチなJavaScriptアプリケーションを構築する際に、より高速で生産的な体験を提供することに注力しています。SPA（シングルページアプリケーション）、特にInertiaのようなツールで開発する場合、Viteが最適です。
ViteはLivewireを使ったJavaScriptの「スプリンクル」を含む従来のサーバーサイドレンダリングアプリケーションにも適しています。ただし、Laravel Mixがサポートする、JavaScriptアプリケーションで直接参照されていない任意のアセットをビルドにコピーする機能など、一部の機能はまだ備わっていません。
#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サイトのグラフィカルインストーラーを使えば、最新のNodeとNPMを簡単にインストールできます。また、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',
'resources/js/app.js',
]),
],
});
代わりに、CSSはJavaScript経由でインポートすべきです。通常はアプリケーションのresources/js/app.jsファイルで行います：
import './bootstrap';
import '../css/app.css';
Laravelプラグインは複数のエントリーポイントや、SSRエントリーポイントのような高度な設定もサポートしています。
#セキュアな開発サーバーの利用
ローカル開発用ウェブサーバーが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',
}),
],
});
別のウェブサーバーを使う場合は、信頼された証明書を生成し、生成した証明書を使うように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プラグインをインストールして設定できます。信頼されていない証明書を使う場合は、npm run devコマンド実行時にコンソールの「Local」リンクからブラウザでVite開発サーバーの証明書警告を受け入れる必要があります。
#WSL2上のSailで開発サーバーを実行する
Windows Subsystem for Linux 2（WSL2）上のLaravel SailでVite開発サーバーを実行する場合、ブラウザが開発サーバーと通信できるように、vite.config.jsに以下の設定を追加してください：
// ...
export default defineConfig({
// ...
server: {
hmr: {
host: 'localhost',
},
},
});
開発サーバー実行中にファイル変更がブラウザに反映されない場合は、Viteのserver.watch.usePollingオプションを設定する必要があるかもしれません。
#スクリプトとスタイルの読み込み
Viteのエントリーポイントを設定したら、アプリケーションのルートテンプレートの<head>に@vite() Bladeディレクティブを追加して参照できます：
<!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をリンクするのではなく、アセットの生の内容を含める必要がある場合があります。例えば、PDFジェネレーターにHTMLコンテンツを渡す際にアセットの内容を直接ページに含めたい場合です。Viteファサードのcontentメソッドを使ってViteアセットの内容を出力できます：
@php
use 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の実行
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のウェブサーバーを指すようにします。
// これを`null`に設定すると、Laravelプラグインが代わりに
// アセットURLを書き換えてViteサーバーを指すようにします。
base: null,
// Vueプラグインは絶対URLを解析し、ファイルシステム上の
// 絶対パスとして扱います。これを`false`に設定すると、
// 絶対URLはそのままにして、publicディレクトリのアセットを
// 期待通り参照できます。
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はビルドにそのアセットを含めないため、アセットがpublicディレクトリに存在することを確認してください。
相対パスでアセットを参照する場合は、パスが参照元のファイルに対して相対的であることを覚えておいてください。相対パスで参照されたアセットはViteによって書き換えられ、バージョン管理され、バンドルされます。
以下のプロジェクト構成を考えてみましょう。
public/
taylor.png
resources/
js/
Pages/
Welcome.vue
images/
abigail.png
次の例は、Viteが相対URLと絶対URLをどのように扱うかを示しています。
<!-- このアセットはViteによって処理されず、ビルドに含まれません -->
<img src="/taylor.png">
<!-- このアセットはViteによって書き換えられ、バージョン管理され、バンドルされます -->
<img src="../../images/abigail.png">
#スタイルシートの扱い
ViteのCSSサポートについては、Viteドキュメントで詳しく学べます。PostCSSプラグイン（例：Tailwind）を使用している場合は、プロジェクトのルートにpostcss.config.jsファイルを作成すると、Viteが自動的に適用します。
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Laravelのスターターキットには、Tailwind、PostCSS、Viteの適切な設定がすでに含まれています。スターターキットを使わずにTailwindとLaravelを使いたい場合は、TailwindのLaravel向けインストールガイドを参照してください。
#Bladeとルートの扱い
#Viteでの静的アセットの処理
JavaScriptやCSSでアセットを参照すると、Viteは自動的にそれらを処理しバージョン管理します。さらに、Bladeベースのアプリケーションをビルドする際には、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メソッド内で定義します。
/**
* アプリケーションサービスのブートストラップ処理。
*/
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をモックしたい場合は、LaravelのTestCaseクラスを継承したテストで利用可能なwithoutViteメソッドを呼び出せます。
use Tests\TestCase;
class ExampleTest extends TestCase
{
public function test_without_vite_example(): void
{
$this->withoutVite(); // Viteを無効化
// ...
}
}
すべてのテストで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
{
parent::setUp();
$this->withoutVite(); // すべてのテストでViteを無効化
}
}
#サーバーサイドレンダリング（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"
"build": "vite build && vite build --ssr"
}
その後、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
スクリプトおよび style タグにnonce属性をコンテンツセキュリティポリシーの一部として含めたい場合は、カスタムのミドルウェア内でuseCspNonceメソッドを使用してnonceを生成または指定できます:
<?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(); // CSP nonceを使用
return $next($request)->withHeaders([
'Content-Security-Policy' => "script-src 'nonce-".Vite::cspNonce()."'", // CSPヘッダーにnonceを追加
]);
}
}
useCspNonceメソッドを呼び出すと、Laravelは生成されるすべてのスクリプトとスタイルタグに自動的にnonce属性を付与します。
Laravel の スターターキット に含まれる Ziggy @route ディレクティブ を含め、他の場所で nonce を指定する必要がある場合は、cspNonce メソッドで取得できます:
@routes(nonce: Vite::cspNonce())
すでにnonceを持っていてLaravelに使わせたい場合は、useCspNonceメソッドにnonceを渡せます。
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';
export default defineConfig({
plugins: [
laravel({
// ...
}),
manifestSRI(),
],
});
必要に応じて、integrityハッシュが格納されるマニフェストキーをカスタマイズすることもできます。
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,
]);
Vite 開発サーバーが動作中は、$chunk と $manifest 引数は null になります。
#高度なカスタマイズ
Laravel の Vite プラグインはデフォルトで多くのアプリケーションに適した合理的な規約を使っていますが、場合によっては Vite の動作をカスタマイズしたいことがあります。追加のカスタマイズオプションを有効にするために、@vite Blade ディレクティブの代わりに使える以下のメソッドとオプションを提供しています。
<!doctype html>
<head>
{{-- ... --}}
{{
Vite::useHotFile(storage_path('vite.hot')) // "hot" ファイルをカスタマイズ...
->useBuildDirectory('bundle') // ビルドディレクトリをカスタマイズ...
->useManifestFilename('assets.json') // マニフェストファイル名をカスタマイズ...
->withEntryPoints(['resources/js/app.js']) // エントリーポイントを指定...
->createAssetPathsUsing(function (string $path, ?bool $secure) { // ビルド済みアセットのバックエンドパス生成をカスタマイズ...
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', // "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">
+ <img src="http://[::1]:5173/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">