Vue3でdotenvを使う方法.envの環境変数名に `VITE_` という接頭辞をつけ`import.meta.env.{環境変数名}` という指定の方法にする (processでエラーが出る人向け)

現象

• Vue3で npm install dotenv して使おうとしたが使えなかった
• process.env.HOGE という書き方ではprocessでエラーになる
  • 予測変換で設定できるので余計混乱する

解決方法

要点は２つ

• .envファイルに設定する環境変数には VITE_ という接頭辞をつける 例） VITE_HOGE
• import.meta.env.{環境変数名} という指定の方法にする 例）import.meta.env.VITE_HOGE

参考サイト
VITE公式 環境変数とモード

エラー全文

process.env.HOGE という書き方ではprocessでエラーになる

Vue: Cannot find name  process . Do you need to install type definitions for node? Try  npm i --save-dev @types/node  and then add  node  to the types field in your tsconfig.

何が起こっていたのか

• Vue.jsはVue3からビルドにVITEを使っている
• 環境変数の設定はVITEに委ねられている

上記２つの点を理解していないと解決にたどり着けない
エラーメッセージで検索してもたどり着けなかった

参考サイト（再掲）
VITE公式 環境変数とモード

混乱の原因

混乱の原因としては大きく２つ原因があると考えている

• Vue3のサイトで環境変数と検索してもヒットしない
• 検索結果に古い設定が書かれた Vue CLI のページがHitする
  • ここで紹介されている方法ではエラーで使用できない process を使う方法だ
  • [Vue CLI モードと環境変数]https://cli.vuejs.org/guide/mode-and-env.html