フロントエンド

viteのセットアップ方法

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/