【Vite】環境変数ファイルの場所を変えてみる
Viteはフロントエンド開発を効率化できるモダンなビルドツールで、Vue3でも新規プロジェクトを作成するとデフォルトでインストールされます。
Viteでは環境変数をファイルで管理することができ、環境変数ファイルは一般的にプロジェクトのルートディレクトリに配置されます。
しかし、環境が複数あるようなプロジェクトでは環境変数ファイルが増えてしまいルートディレクトリが煩雑になってしまいます。
また、プロジェクトの構造や要件によって環境変数ファイルを別のディレクトリに配置しなければならないこともあります。
この記事では環境変数ファイルを別のディレクトリに配置する方法をご紹介します。
目次
はじめに
こんにちは。
クラウドソリューショングループのakahane.tです。
Viteのデフォルト設定では環境変数ファイルが邪魔になったので、今回は任意のディレクトリに移動させたいと思います。
ViteはVue3で新規プロジェクトを作成するとデフォルトでインストールされますので、Vue3のデフォルトで作成したプロジェクトを基にご紹介します。
デフォルトの配置場所
Viteのデフォルト設定では環境変数ファイルはプロジェクトのルートディレクトリ直下から読み込まれるため以下のようなディレクトリ構造になります。
project_root/
├ public/
├ src/
├ .env <-- 環境変数ファイル
├ index.html
├ jsconfig.json
├ package.json
├ README.md
└ vite.config.js
環境変数ファイルが1つであればいいですが、環境の追加にあわせて環境変数ファイルが増えていくと以下のようにプロジェクトのルートディレクトリがどんどん汚れていきます。
project_root/
├ public/
│ :
├ .env
├ .env.dev1
│ :
├ .env.dev10
├ .env.stg1
│ :
├ .env.stg10
│ :
└ vite.config.js
プロジェクトのルートディレクトリはIDEでツリー表示したときに基本的に展開されたままになりますので、ファイルであふれていると視認性や操作性が悪くなるためサブディレクトリにまとめておくのがおすすめです。
配置場所の変更
それでは本題の環境変数ファイルの配置場所をプロジェクトのルートディレクトリから別のディレクトリに変更する方法をご紹介します。
今回は以下のようにプロジェクトのルートディレクトリにconfigディレクトリを追加し、その配下に配置場所を変更します。
project_root/
├ config/
│ └ .env <-- ここに移動
├ public/
├ src/
├ index.html
├ jsconfig.json
├ package.json
├ README.md
└ vite.config.js
変更方法は簡単で ルートディレクトリ直下にある vite.config.js で envDir に環境変数ファイルを配置したディレクトリのパス を設定するだけです。
Vue3のデフォルトで作成した今回のプロジェクトの場合は以下のようになります。
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
envDir: './config' // <-- envDir を追加
})
envDirは絶対パスもルートディレクトリからの相対パスもどちらも対応していますので、ご自身の環境に合わせて値を設定してください。
おわりに
今回ご紹介した環境変数ファイルを別のディレクトリに配置する方法は、私がVue × Viteを学び始めたときに環境変数をファイル化したい・任意の場所に置きたいとなって苦労したところだったので記事にしてみました。
これからVueやViteを学習する方でも、すでに利用している方でも同じことをしたいときにお役に立てれば幸いです。
