Viteで入力ディレクトリと出力ディレクトリを変更する

問題点

Viteを使用してマルチページの静的サイトを構築する際、デフォルトのプロジェクト構造ではソースファイルがルート直下に配置され、ビルド出力も期待する場所に生成されないという問題が発生します。

デフォルトの構造:

my-app/
├─ node_modules/
├─ dist/
│  ├─ assets/
│  ├─ index.html
├─ index.html
├─ main.js
├─ style.scss
├─ package.json

希望する構造:

my-app/
├─ node_modules/
├─ package.json
├─ src/
│  ├─ about.html
│  ├─ index.html
│  ├─ main.js
│  ├─ style.scss
├─ dist/
│  ├─ assets/
│  ├─ about.html
│  ├─ index.html

解決策

Viteの設定ファイルを使用して、入力ディレクトリと出力ディレクトリをカスタマイズできます。

基本的な設定

まず、プロジェクトルートに vite.config.js ファイルを作成します：

import { defineConfig } from 'vite'

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist',
    emptyOutDir: true
  }
})

マルチページアプリケーションの設定

マルチページアプリケーションでは、すべてのHTMLエントリポイントを明示的に指定する必要があります。

方法1：手動でエントリを指定

import path from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist',
    rollupOptions: {
      input: {
        index: path.resolve(__dirname, 'src/index.html'),
        about: path.resolve(__dirname, 'src/about.html')
        // 他のページを追加
      }
    }
  }
})

方法2：動的にエントリを生成（globを使用）

import path from 'path'
import { defineConfig } from 'vite'
import glob from 'glob'

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist',
    rollupOptions: {
      input: Object.fromEntries(
        glob.sync(path.resolve(__dirname, 'src/*.html')).map(file => [
          path.relative(
            'src',
            file.slice(0, file.length - path.extname(file).length)
          ),
          file
        ])
      )
    }
  }
})

WARNING

globを使用する場合は、まずインストールする必要があります：

npm install glob -D

出力ディレクトリ名の変更

出力ディレクトリ名を dist から別の名前に変更したい場合（例：build）：

import { defineConfig } from 'vite'

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../build'
  }
})

package.jsonスクリプトの更新

設定ファイルを使用する場合、package.jsonのスクリプトを単純化できます：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

TIP

設定ファイルの場所をカスタムパスに配置した場合は、--config フラグを使用します：

{
  "scripts": {
    "dev": "vite --config ./config/vite.config.js",
    "build": "vite build --config ./config/vite.config.js"
  }
}

重要な注意点

1. emptyOutDirオプション: これを true に設定すると、ビルド時に出力ディレクトリがクリーンアップされます。運用環境で使用する場合は注意してください。

2. ベースパスの設定: サブディレクトリにデプロイする場合は、base オプションを設定します：

   export default defineConfig({
     base: '/my-app/',
     // 他の設定
   })

3. 設定ファイルの配置: 設定ファイルはプロジェクトルートまたは src ディレクトリ内に配置できますが、パスの解決に影響するため一貫性を持たせることが重要です。

まとめ

Viteで入力ディレクトリと出力ディレクトリを変更するには、vite.config.js ファイルで root と build.outDir を設定します。マルチページアプリケーションの場合は、rollupOptions.input ですべてのエントリポイントを明示的に指定する必要があります。これにより、プロジェクト構造を整理し、ビルドプロセスを希望通りにカスタマイズできます。