現象

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