VueJS 进程显示未定义

Question

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

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

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

[编辑]

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

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

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

• 这是我的文件夹结构

Answer 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 密钥）！环境变量嵌入到构建中，这意味着任何人都可以通过检查您的应用文件来查看它们。

Answer 2

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

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

Answer 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;
    },
},