株式会社NextCode
2023/03/05
Laravel9 Viteで静的ファイルをコピーする
Laravel MixからViteに切り替わったかと思いますが、Mixで行っていた静的ファイルのコピーをViteで行う方法になります。
ただ、本記事ではMix程の柔軟性のあるコピーは行えませんので、ご了承下さい。
静的コピーを行うプラグインをインストール
npm install -D vite-plugin-static-copy
「vite.config.js」の編集
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { viteStaticCopy } from 'vite-plugin-static-copy' // ↓ この行を追加
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js'
],
refresh: true,
}),
// ----- ここから追加 -----
viteStaticCopy({
targets: [
// node_modulesのファイルをコピーする例
{
src: 'node_modules/chart.js/dist/chart.js',
dest: 'js/chart.js'
},
// resourcesのファイルをコピーする例
{
src: 'resources/img/*', // ← 最後の*がないとpublic/build内のディレクトリがおかしくなる
dest: 'img'
},
]
}),
// ----- ここまで追加 -----
]
});
buildをすると、public/build内にコピーがされます。
呼び出し
JavaScriptの呼び出し
<script src="{{ asset('build/js/chart.js') }}"></script>
画像の呼び出し
<img src="{{ asset('build/img/test.jpg') }}">
以上になります。
