search
LoginSignup
0

More than 1 year has passed since last update.

posted at

Nuxtでdotenvを使わずに環境変数を参照する時の罠

こんにてぃあ。もぐめっとです。

本日はnuxtで環境変数を参照する際にひっかかったのでご紹介します。

どんな罠?

最近のNuxtはdotenvを使わずとも.envファイルをトップディレクトリに置いていると環境変数を読み込んでくれるようになりました。
しかし、process.env.HOGEとか参照しても値が全然とれないんです。

下記記事によると、RuntimeConfigに定義するという話があります。

しかし、これは$configにセットされるようでprocess.envに読み込まれるわけではないです。
私はprocess.envが使いたいんだーーー!

解決策

ということで社内で解決策を聞いたらサクッと答えが出ました。

答えは簡単でnuxt.config.jsのenvフィールドに追加するだけでした。

nuxt.config.js
export default {
  env: {
    HOGE: process.env.HOGE
  }
}

これでどこから読んでもprocess.env.HOGEが呼ばれるようになりました。やったね!

まとめ

process.envをわざわざセットし直すのはなんだか手間に感じますが、nuxt.config.jsでもenvをセットすることで環境変数が使えるようになります!

最後に、ワンナイト人狼オンラインというゲームを作ってます!よかったら遊んでね!

他にもCameconOffchaといったサービスも作ってるのでよかったら使ってね!

また、チームビルディングや技術顧問、Firebaseの設計やアドバイスといったお話も受け付けてますので御用の方は弊社までお問い合わせください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0