Vue.js 无法访问组件 nuxt 中的 process.env 变量

发布于12月20日

在nuxt配置中，我有env对象

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

只要我想在组件模板中显示它:

{{ process.env.hey }}

我搞错了

无法读取未定义的属性"env"

知道是什么原因吗？

推荐答案

Nuxt < 2.13

process不能直接用于模板，但可以通过创建计算(computed)属性或将其添加到组件状态来访问它.下面是一个例子:

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

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

Nuxt >= 2.13

您现在可以使用runtime config，如下所示:

nuxt.config

export default {
  publicRuntimeConfig: {
    message: process.env.hey || 'hello world!',
  },
};

template.vue

<template>
  <div>{{ $config.message }}</div>
</template>

实用课程推荐