1

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

当我尝试以下操作时，编译会抛出错误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。

4

1 回答 1

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这发生在构建时。

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

于 2020-09-17T09:24:44.350 回答