VueJS 进程显示未定义

Posted 2023-02-22

【中文标题】VueJS 进程显示未定义

【英文标题】：VueJS Process shows undefined

【发布时间】：2021-04-23 10:45:47

【问题描述】：

拥有一个在 Vue 中构建的应用。一直试图弄清楚这一点。我无法访问流程变量。到目前为止已经尝试了多种方法。

确保我的 .env 文件位于根目录中 每次我将变量添加到 .env 文件时都运行构建和服务 已安装 dotenv

我正在使用 vue/cli 4.3.1 我错过了什么？

[编辑]

现在，我的 .env 只有 1 个条目

尝试在 created() 方法中访问它

创建：函数（） console.log(process.env.VUE_APP_NOT_SECRET_CODE);

这是我的文件夹结构

【问题讨论】：

分享你的文件结构截图？

您应该显示.env 文件的内容以及您如何尝试访问它们的示例

我已经用截图更新了主帖

【参考方案1】：

如果process 是undefined

检查你的 NodeJs 版本

您可能想要更新您的 NodeJs 版本（和 npm），删除 node_modules 文件夹并再次点击 npm install。我阅读了一些有帮助的案例。

重新创建env 文件

.env 文件可能在某些方面有问题。尝试删除文件并使用控制台重新创建它（如 linux 上的 touch .env）

如果变量是undefined

检查您的命名是否正确：VUE_APP_MYVAR 而不是 MYVAR

在Vue 中涉及Environment Variables 时最常见的错误是命名。使用 env 时，必须在所有变量前加上 VUE_APP_，否则 Vue 不会包含它们。

更多背景信息在这里：https://cli.vuejs.org/guide/mode-and-env.html。来自文档

请注意，只有 NODE_ENV、BASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态嵌入到客户端包中。这是为了避免意外暴露机器上可能具有相同名称的私钥。

? 确保在您的应用中不包含任何秘密（例如私有 API 密钥）！环境变量嵌入到构建中，这意味着任何人都可以通过检查您的应用文件来查看它们。

【讨论】：

我确保将 VUE_APP_ 添加到变量中。但令我困扰的是该过程显示为未定义。并不是说特定变量未定义或丢失..

哦，所以我误解了我的问题！ process 未定义或 process.env ?

进程未定义。

我为 undefined process 添加了两个额外的故障排除思路?

我已经尝试使用 touch .env 创建文件。但是，我还没有尝试删除 node_modules 并再次安装。会尝试的。感谢您的提示！

【参考方案2】：

尝试了此处和其他线程中的所有建议海报，但仍然出现 process is undefined 错误。 对于那些想知道我做了什么的人，我正在使用 window. webpackhotupdate 确定我是在处理 prod 构建还是 dev 构建。 webpackhotupdate 在开发版本中是真的。

不是最优雅的，但现在可以完成工作。

【参考方案3】：

虽然其他答案可能会有所帮助，但对我来说，这个问题的最终解决方案是，实际上只读取 mounted 处的值。我不确定为什么，但这对我有用：

mounted: function (): void 
    console.log('App version: ' + process.env.VUE_APP_VERSION);
    console.log('Environment: ' + process.env.NODE_ENV);        
,

为了在模板化的 HTML 输出中显示它们，我必须确保 undefined 没有使进程崩溃，并且我已经这样做了（丑陋的方式）像这样（注意 extra 空字符串计算函数的开头）：

<p title="App info">
    <small>App version:  version  ( environment )</small>
</p>
//....
computed: 
    version(): string 
        return '' + process.env.VUE_APP_VERSION;
    ,

    environment(): string 
        return '' + process?.env?.NODE_ENV;
    ,
,