コンポーネントnuxtのprocess.env変数にアクセスできません

Question

Nuxtconfigにenvオブジェクトがあります

env: {
    hey: process.env.hey || 'hey'
},

コンポーネントテンプレートに表示したい場合：

{{ process.env.hey }}

エラーが発生しました

未定義のプロパティ 'env'を読み取れません

何がそれを引き起こす可能性があるのか​​考えていますか？

Answer 1

processはテンプレートで直接利用できませんが、計算されたプロパティを作成するか、コンポーネントの状態に追加することでアクセスできます。次に例を示します。

<template>
  <div>{{ message }}</div>
</template>

export default {
  computed: {
    message() {
      return process.env.hey;
    },
  },
};

Answer 2

Vueコンポーネントは、環境変数に直接アクセスできません。 Vueはクライアント側であり、環境変数はサーバー側であると考えてください。

これを回避するには、おそらくいくつかの方法があります。 webpackを使用している場合、これは1つのオプションです。

https://webpack.js.org/plugins/define-plugin/

クライアント側で環境変数をグローバル変数として定義できます。