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

Question

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

所以我想知道我如何能访问值设置在我的。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>

这很好地展示了我要做的。我知道下一种方法是通过在nuxt.config.js中的publicRuntimeConfig和privateRuntimeConfig对象中声明它们，所以这就是我所做的，现在我的.VAL可以通过this.$config.VAL在我的组件中访问-而不是在export default {}-_-

任何想法或想法将不胜感激。如果你需要更多的内容，请告诉我。

Answer 1

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

所以你需要将你的env-vars添加到下一个配置中才能访问它们。

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

在应用程序中，你可以像

那样访问它们

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