将环境变量加载到 vue.js

Posted 2023-02-22

【中文标题】将环境变量加载到 vue.js

【英文标题】：Load environment variables into vue.js

【发布时间】：2017-01-18 11:14:59

【问题描述】：

我正在使用 node.js + vue.js 构建一个应用程序，想知道是否有人知道我如何将环境变量加载到我的 vue.js 组件中？现在我正在使用 dotenv 包在我的服务器端代码中加载环境变量，但它似乎不适用于 vue.js ..

提前致谢！

【问题讨论】：

您可以使用DefinePlugin，查看此answer。您还可以将 DefinePlugin 与 Configuration types 一起使用，就像在另一个 answer 中一样。

【参考方案1】：

您可以像这样从 NodeJS 公开环境变量：

console.log(process.env.EXAMPLE_VARIABLE);

更多详情process.env：https://nodejs.org/api/process.html#process_process_env

要在 Vue（或任何 javascript 框架）中向客户端公开您的环境变量，您可以呈现来自 NodeJS 的 JSON 响应，该响应通过 AJAX 调用获取。

【讨论】：

只能关闭dev server重启后环境变量，或者重新build~

我刚刚像@mintedsky 建议的那样重新启动，它工作正常。 npm run serve - 谢谢

由于 Vue CLI 3，未来的观众可能会从这篇文章中受益：***.com/questions/50828904/…

【参考方案2】：

使用Vue Cli 3，你可以像这样加载你的环境变量

在应用程序的根目录中创建一个.env 文件。

在.env 文件中，为您的环境变量添加前缀VUE_APP_。

例如：VUE_APP_SECRET=SECRET。

现在您可以在应用程序代码中使用process.env.THE_NAME_OF_THE_VARIABLE 访问它们。

例如：console.log(process.env.VUE_APP_SECRET)// SECRET

您可以阅读更多here

【讨论】：

当我这样做时，在控制台中打印的值是 'SECRET' 而不是从 express node.js 设置的 SECRET 的值

请不要将实际的秘密放入 .env 文件中，否则会暴露。