将环境变量加载到 vue.js

Question

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

提前致谢！

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 调用获取。

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