Viteでファイルをコピーする

ViteでChrome拡張機能開発時にdistディレクトリにファイルをコピーする必要があったので、方法をメモしておきます。

vite-plugin-static-copyのインストール

vite-plugin-static-copyをインストールします。

npm i -D vite-plugin-static-cop

もしくは

yarn add -D vite-plugin-static-copy

vite.config.ts(.js)の設定

vite.config.ts(.js)に以下の設定を追加します。

import { defineConfig } from "vite";
import { viteStaticCopy } from 'vite-plugin-static-copy'
import { resolve } from "path";

// ...他のコード
export default defineConfig({
  // ...他の設定
  plugins: [
    // ...他のプラグイン

    // 追加
    viteStaticCopy({
      targets: [
        // ここにコピー元とコピー先のパスを記述
        {
          src: "src/assets/example.txt",
          dest: "dist/assets",
        },
        // まとめてコピーする場合は以下のように記述
        {
          src: "src/assets/js/*",
          dest: "dist/assets",
        },
        // resolveを使って記述する場合は以下のように記述
        // Windowsでこれを使うと失敗（後述）
        {
          src: resolve(__dirname, "src/assets/example.txt"),
          dest: resolve(__dirname, "dist/assets"),
        },
      ],
    }),
  ],
  // ...他の設定
});

Windowsでresolveを使う場合

Windowsでresolveを使ってパスを記述すると[vite-plugin-static-copy] No items to copy.と表示されて上手くコピーされませんでした。

Windowsのパスの区切り文字が/ではなく\(＼)であることが原因のようです。

そこで、normalizePathを使用して区切り文字を/に変更する必要があります。

import { defineConfig, normalizePath } from "vite"; // normalizePathを追加
// 略
targets: [
  {
    src: normalizePath(resolve(__dirname, "src/assets/example.txt")),
    dest: normalizePath(resolve(__dirname, "dist/assets")),
  },
]

これで上手くコピーされるようになります。