ぷっぽプログラミング備忘録

linux, javascript, php, C#, そのうちScalaとかアプリ開発とかやってみたいです。

viteのbuildで静的ファイルをコピーする

結論

pluginをインストールする

vite-plugin-static-copy - npm

npm install -D vite-plugin-static-copy

vite.config.ts に追記

上記pluginのサイトの説明のままですが。

export default defineConfig({
        .... なんやかんや...
    build: {
        assetsInlineLimit: 0,
        outDir: '../../public/phaser'
    },
    plugins: [
        viteStaticCopy({
            targets: [
                {
                    src: 'assets/*',
                    dest: 'assets'
                }
            ]
        })
    ],
        .... なんやかんや...
});

といった感じで、コピー元とコピー先を指定すればOKです。

ちなみに私はoutDirを設定しているので、上記でnpm run buildすると
【vite.config.tsのあるディレクトリ】/assets/(srcで指定したディレクトリ)以下のファイルが全て、
../../public/phaser/assets(【outDirで指定したディレクトリ】/【destで指定したディレクトリ】)
にコピーされました。

言い換えると
src: 【vite.config.tsのあるディレクトリ】からの相対パス
dest: 【outDirで指定したディレクトリ】からの相対パス
といった感じでしょうか。

参考

vite-plugin-static-copy - npm

Laravel9 Viteで静的ファイルをコピーする - 株式会社NextCode - 福山市のHP制作・システム開発