フロントエンド
viteのセットアップ方法

Vite install方法
Viteというホットリロードが爆速なビルドツールが便利すぎるのでインストール方法を書き記しておきます。
まずは以下のコマンドを叩いて
npm create vite@latest
対象のディレクトリに移動後
npm install
以下のコマンドで下層サーバーを立ち上げる。
npm run dev
ビルドの方法
npm run build
vite.config.jsの設定
srcディレクトリに対象のファイルを作成後、vite.config.jsを作成します。
自分は以下の方法で記述してます。もっといい方法があるかもしれません・・・(笑)
もし知ってる方いたら教えてください!
const { resolve } = require('path')
const root = 'src'
module.exports = {
root: root,
publicDir: 'public',
build: {
outDir: '../dist', //アウトプットディレクトリ
rollupOptions: {
input: {
main: resolve(__dirname, root, 'index.html'),
privacy: resolve(__dirname, root, 'privacy/index.html'),//お好きなディレクトリとファイル名に
},
output: {
entryFileNames: 'assets/[name].js',
chunkFileNames: 'assets/[name].js',
assetFileNames: 'assets/[name].[ext]',
}
}
}
}
再度npm run dev
で仮想サーバーを立ち上げてファイルがエラーがでなければ成功です。
以上です。お疲れ様でした。
もっと詳しく知りたい方がいたら、公式ドキュメントも参考にしてみるのもいいかもしれません。
以下のURLで詳しく書かれているので参考にしてみてください。
URL:https://ja.vitejs.dev/config/