如何在 Nuxt.js 的导入中访问环境变量

Question

我有一个非常标准的组件，它可以导入和使用其他组件。我想根据我的 .env 文件中设置的值有条件地导入其子组件之一，但似乎在 export default {} 脚本对象之外无法访问 process.env 或 this。

所以我想知道如何从这里访问我的 .env 文件中设置的值，如果可能的话？

这是我正在尝试做的娱乐：

my-component.vue

<template>
  <!-- irrelevant markup -->
</template>

<script>
  import ChildComp from process.env.VAL === 'thing' ? '@/components/child1' : '@/components/child2';
  // or even ` ... from this.$config.VAL === ... `

  export default {
    components: { ChildComp },

    // more irrelevant code here...
  }
</script>

所以这几乎显示了我正在尝试做的事情。我知道执行 env vals 的 nuxt 方法是在 nuxt.config.js 的 publicRuntimeConfig 和 privateRuntimeConfig 对象中声明它们，这就是我所做的，现在我的 .VAL 可以通过 @ 在我的组件中访问987654332@ - 不在外面export default {} -_-

任何想法或想法将不胜感激。如果您需要更多信息，请告诉我。

Answer 1

默认情况下，在 Nuxt 中，您无法访问您的 .env 变量，因为 Nuxt 应用程序也可以在没有任何服务器的情况下提供服务。

因此，您需要将环境变量添加到 nuxt config 才能访问它们。

export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

在应用程序中，您可以像访问它们

• process.env.baseUrl
• context.env.baseUrl