如何在功能组件中访问环境变量？

Question

如果未将prop传递给我的功能组件，我想定义一个默认值。 此默认值是环境变量。

当我尝试以下操作时，编译将引发错误TypeError: Cannot read property 'env' of undefined

<template functional>
    <div class="header__small">{{ props.header_small ? props.header_small : process.env.VUE_APP_DEFAULTHEADER }}</div>
</template>

如果我尝试使用parent.process.env.VUE_APP_DEFAULTHEADER

，也会发生同样的情况

env变量在应用程序中的所有其他经典组件中均能正常工作。它只是与功能性的不兼容。 如果我将其他值（而不是process.env）传递给其他值，则用于定义默认值的三元运算符也可以很好地工作。

Answer 1

由于您仅将其用作道具的默认值，因此您尝试了吗？

props: {
  header_small: {
    type: String,
    default: process.env.VUE_APP_DEFAULTHEADER
  }
}

1. process.env.XXX不能直接在模板中使用-同样适用于有状态和功能组件
2. 必须始终在组件的<script>部分使用
3. 在功能组件中，只能将其用作default声明的prop值或直接在render()功能代码中使用

更多详细信息

在Webpack / Vue CLI项目中，环境变量由Webpack DefinePlugin处理。它用process.env.XXX文件中定义的某个字符串值替换出现的.env。 这是在构建时发生的。

由于某种原因，它仅在SFC的<script>部分（大多数情况下为JS）中使用时才有效。但是我们也知道Vue模板are compiled into plain JavaScript。那么，为什么它在模板中也不起作用？我试图在Google上搜索一下，但未找到任何答案。因此，我猜想vue-loader创建者的决定是不允许DefinePlugin处理Vue编译器的输出，可能是因为其本质（本质上是字符串替换）以及担心难以调试/支持问题...