Viteでルートディレクトリを変更する方法

Viteでルートディレクトリを変更する方法

Viteをインストールすると、index.htmlは、プロジェクトディレクトリ直下に置いてあります。

srcとかのディレクトリを置いて、その中にindex.htmlをおきたい時に、どうするのかちょっと困ったので、設定方法をメモしておきます。

※Vite使うためには、Node.jsのインストールが必須です。

//viteのデフォルト構成
├── package-lock.json
├── package.json
├── main.js
├── index.html


//こんな感じのディレクトリ構成にしたい
├── node_modules/
├── package-lock.json
├── package.json
└── src/
    └── js/
        └── main.js
    └── css
    └── index.html

コマンドラインから vite を実行すると、Vite はプロジェクトルート内の vite.config.js という名前の設定ファイルを自動的に解決しようとします。

ルートディレクトリの変更方法

  • vite.config.jsをプロジェクトルートに作る
  • vite.config.jsに下記の記述する
export default  {
  root: 'src'
}
├── node_modules/
├── package-lock.json
├── package.json
├── vite.config.js
└── src/
    └── js/
        └── main.js
    └── css
    └── index.html

ビルド設定する場合

import { defineConfig } from 'vite';
export default defineConfig({
    root: './src', //開発ディレクトリ設定
    build: {
        base: './', //相対パスでビルド
        outDir: '../dist', //出力場所の指定
    },
});
├── node_modules/
├── package-lock.json
├── package.json
├── vite.config.js
└── dist/
└── src/
    └── js/
        └── main.js
    └── css
    └── index.html

以上です。

まい

フロントエンドエンジニア目指して、勉強中です。

Viteカテゴリの最新記事