将环境变量加载到vue.js中

Question

我正在使用node.js + vue.js构建一个应用程序，想知道如何将环境变量加载到我的vue.js组件中?目前我正在使用dotenv包在服务器端代码中加载环境变量，但好像不适用于vue.js。谢谢！

- Trung Tran

---

你可以使用DefinePlugin，参考这个答案。你也可以像另一个答案中那样，将DefinePlugin与配置类型一起使用。 - Ricky Ruiz

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调用进行摄取。

- Paul Wenzel

---

只有在关闭开发服务器并重新启动或进行新的构建后，才能使用环境变量~ - mintedsky

我刚刚按照 @mintedsky 的建议重新启动了，然后它就可以工作了。npm run serve - 谢谢。 - Gel

由于 Vue CLI 3，未来的用户可能会从这篇文章中受益：https://dev59.com/w1UL5IYBdhLWcg3wHU7M - Dan der Mensch

Answer 2

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

1. 在应用程序的根目录中创建一个.env文件。 2. 在.env文件中，使用VUE_APP_作为环境变量的前缀。例如：VUE_APP_SECRET=SECRET。 3. 现在，您可以在应用程序代码中使用process.env.THE_NAME_OF_THE_VARIABLE来访问它们。例如：console.log(process.env.VUE_APP_SECRET) // SECRET。

您可以在此阅读更多here。

- Ayotunde Olubiyo

---

当我这样做时，在控制台中打印的值是'SECRET'，而不是从Express Node.js设置的SECRET值。 - VVictor

请不要将实际的机密信息放入.env文件中，否则会被泄露。 - Marcel