无法读取 Vue JS 上下文中的环境变量答案

【问题标题】：Unable to read the environmental variable in the contect of VueJS无法读取 Vue JS 上下文中的环境变量
【发布时间】：2021-04-22 17:20:27
【问题描述】：

我正在尝试在我的组件中使用环境变量。但它最初在我使用变量时有效，但随后会引发错误。

Component.vue

website: 'testing-hard-reality'

代码在硬编码时工作得非常好，如上所示。如果使用环境变量而不是硬代码，我会收到错误

.env.local

VUE_APP_WEB_SITE: 'testing-hard-reality'

在组件中，变量被用作：

website: process.env.VUE_APP_WEB_SITE

在我的控制台中，我收到错误

[Vue 警告]：v-on 处理程序中的错误：“错误：未设置网站名称”

请告诉我该怎么做。

【问题讨论】：

请提供完整的可重现演示
env 变量应该类似于env.local 文件中的VUE_APP_WEB_SITE=testing-hard-reality。它由 = 运算符分隔 => key=value
谢谢@Nilesh 我已经改变了，但我仍然得到同样的错误

【解决方案1】：

在同级src文件夹中创建一个文件

.env.development.local 用于本地工作

.env.production.local 用于生产

在文件中添加你的环境变量

VUE_APP_MY_VARIABLE_NAME = my-value-here

VUE_APP_* 部分很重要，因为 vue 项目中的所有 env 变量都需要以这个前缀开头。

现在要访问此值，请执行以下操作：

process.env.VUE_APP_MY_VARIABLE_NAME

重要步骤

每当您修改 .env 文件时，您必须停止服务器并重新启动它以获取环境更改。

【讨论】：

【解决方案2】：

我猜你正在使用 vue-cli 来构建你的 vue 项目。在 vue-cli 文档中，我发现 env.local 的语法是

VUE_APP_WEB_SITE=testing-hard-reality

不是你的演示：VUE_APP_WEB_SITE: 'testing-hard-reality'

【讨论】：