将环境变量加载到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呈现通过AJAX调用获取的JSON响应。

Answer 2

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

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

2. 在.env文件中，环境变量的前缀为“ VUE_APP_”。

   示例：VUE_APP_SECREY=SECRET。

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

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

您可以阅读更多here