Posted: 2022.10.30 / Category: PHP / Tag: Laravel

一般ユーザーに表示するフロント画面と管理画面で大きくデザインがことなる場合アセットを分けたいとときがあると思います。
そこで今回はLaravel Viteでビルドの分け方をご紹介します。

Laravel Viteの使い方は下記も参考にしてください。

Laravelに新しく導入されたフロントビルドツール「Vite」でTypeScript+React開発環境を構築する方法

フォルダ構成

resources以下のcss,jsディレクトリにそれぞれback,frontを作成します。

resources
├ css
│ ├ back
│ │  └ app.css
│ └ front
│    └ app.css
└ js
  ├ back
  │  └ app.js
  └ front
     └ app.js

config設定

PHPのVite設定ファイルを編集します。
ない場合あらたに作成します。
これはbladeファイルで@viteディレクリブを使用したときに使用する設定になります。

config/vite.php

<?php
return [
	'configs' => [
		'front' => [
			'entrypoints' => [
				'paths' => [
					'resources/js/front/app.js',
					'resources/css/front/app.css',
				]
			],
			'dev_server' => [
				'enabled' => true,
				'url' => env('DEV_SERVER_URL', 'http://localhost:5173'),
				'ping_before_using_manifest' => true,
				'ping_url' => null,
				'ping_timeout' => 1,
			],
			'build_path' => 'build/front',
		],
		'back' => [
			'entrypoints' => [
				'paths' => [
					'resources/js/back/app.js',
					'resources/css/back/app.css',
				]
			],
			'dev_server' => [
				'enabled' => true,
				'url' => env('DEV_SERVER_URL', 'http://localhost:5173'),
				'ping_before_using_manifest' => true,
				'ping_url' => null,
				'ping_timeout' => 1,
			],
			'build_path' => 'build/back',
		],
	],
];

vite.config設定

通常はvite.configファイルを使用しますが、今回はfront,back用にそれぞれ別ファイルを作ります。

vite.front.config.js

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

export default defineConfig({
	plugins: [
		laravel({
			config: 'front',
			input: [
				'resources/js/front/app.js',
				'resources/css/front/app.css'
			],
			buildDirectory: 'build/front',
			refresh: true
		})
	]
})

vite.back.config.js

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

export default defineConfig({
	plugins: [
		laravel({
			config: 'back',
			input: [
				'resources/js/back/app.js',
				'resources/css/back/app.css'
			],
			buildDirectory: 'build/back',
			refresh: true
		})
	]
})

package.jsonの設定

作成した「vite.front.config.js」と「vite.back.config.js」をコマンド実行時読み込むするように設定する必要があります。

package.json

{
	"private": true,
	"scripts": {
		"dev:front": "vite --config vite.front.config.js",
		"dev:back": "vite --config vite.back.config.js",
		"build:front": "vite build --config vite.front.config.js",
		"build:back": "vite build --config vite.back.config.js"
	},
	// ...
}

これで下記コマンドで作成した設定ファイルを読み込むことができます。

フロント開発時
$ yarn run dev:front
フロントビルド時
$ yarn run build:front
管理画面開発時
$ yarn run dev:back
管理画面ビルド時
$ yarn run build:back

表示

ビューファイルで設定したアセットを読み込みます。
@viteディレクティブの引数はconfig/vite.phpで設定したキーになりますので、フロントは「front」管理画面は「back」で指定します。

// フロントファイル
@vite('front')
// 管理画面ファイル
@vite('back')