如何访问功能组件中的环境变量？
How to access env variable in functional component?
如果道具没有传递到我的功能组件，我想定义一个默认值。
这个默认值是一个环境变量。
当我尝试以下操作时，编译会抛出错误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.
由于您仅将其用作道具的默认值，您尝试过吗？
props: {
header_small: {
type: String,
default: process.env.VUE_APP_DEFAULTHEADER
}
}
process.env.XXX 不能直接在模板中使用 - 同样适用于有状态和功能组件- 必须始终在组件的
<script>部分使用
- 在功能组件中，只有在
default 声明的 prop 值或直接在 render() 函数代码 中可以使用它
更多详情
在Webpack/Vue CLI项目中，环境变量由Webpack处理DefinePlugin。它用 .env 文件中定义的某个字符串值替换任何出现的 process.env.XXX。
这发生在构建时。
出于某种原因，它仅在 SFC 的 <script> 部分（大部分时间是 JS）中使用时才有效。但是我们也知道 Vue 模板 are compiled into plain JavaScript。那么为什么它在模板中也不起作用呢？我试图 google 一点，但没有找到任何答案。所以我猜 vue-loader 创建者决定不允许 DefinePlugin 处理 Vue 编译器的输出，这可能是因为它的性质（本质上是字符串替换）和担心难以 debug/support 的问题...
如果道具没有传递到我的功能组件，我想定义一个默认值。 这个默认值是一个环境变量。
当我尝试以下操作时，编译会抛出错误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.
由于您仅将其用作道具的默认值，您尝试过吗？
props: {
header_small: {
type: String,
default: process.env.VUE_APP_DEFAULTHEADER
}
}
process.env.XXX不能直接在模板中使用 - 同样适用于有状态和功能组件- 必须始终在组件的
<script>部分使用 - 在功能组件中，只有在
default声明的prop值或直接在render()函数代码 中可以使用它
更多详情
在Webpack/Vue CLI项目中，环境变量由Webpack处理DefinePlugin。它用 .env 文件中定义的某个字符串值替换任何出现的 process.env.XXX。
这发生在构建时。
出于某种原因，它仅在 SFC 的 <script> 部分（大部分时间是 JS）中使用时才有效。但是我们也知道 Vue 模板 are compiled into plain JavaScript。那么为什么它在模板中也不起作用呢？我试图 google 一点，但没有找到任何答案。所以我猜 vue-loader 创建者决定不允许 DefinePlugin 处理 Vue 编译器的输出，这可能是因为它的性质（本质上是字符串替换）和担心难以 debug/support 的问题...