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

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 处理。它用.env 文件中定义的某个字符串值替换任何出现的process.env.XXX。 这发生在构建时。

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