如何访问函数组件中的env变量

Question

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

当我尝试以下操作时，编译将抛出错误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变量在应用程序中的其他所有经典组件中都运行良好。它只是不能与功能性的一起工作。定义默认值的三元运算符也可以很好地工作，如果我将其传递给任何其他值，只是不处理.env.

Answer 1

由于您只将其用作道具的默认值，您尝试过吗？

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

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

更多详细信息

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

由于某些原因，它只有在SFC的<script>部分(大多数时候是JS(中使用时才有效。但我们知道Vue模板也被编译成了普通的JavaScript。那么，为什么它在模板中不起作用呢？我试着用谷歌搜索了一下，但没有找到任何答案。所以我想vue-loader创建者决定不允许DefinePlugin处理Vue编译器的输出，可能是因为它的性质(本质上是字符串替换(和担心难以调试/支持的问题。。。