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以上です。
