如何使用 Vue 前端和 rails 后端实现 env vairables？ 是否需要使用 dotenv package 来完成此任务？

Question

我开始从事一个项目，该项目有一些需要保护的 API 密钥。 我的个人项目都是使用 React 和 Node，但是这个项目是使用 yarn（我不熟悉）构建的。 我已经运行了yarn add dotenv ，并且尝试使用他们的文档来启动并运行它。 所有的console.log(process.env.***)都返回undefined 。

到目前为止，我的方法是将变量添加到项目根目录中的 .env 文件中，并将require('dotenv').config()添加到要加载的项目的application.js文件中。 我读到 Vue.js 3 不需要 dotenv 而是使用 _VUE_APP 附加到变量名（我试图确保它不能与 Vue 2.8 一起工作。剧透，它没有）。

有没有我错过的步骤？ 我应该完全采取不同的方法吗？

提前致谢！

Answer 1

假设您有两个环境：开发和生产。

要为这些环境创建变量，请在根文件夹中为每个环境创建一个文件（其中package.json或.gitignore ），一个名为.env.development的文件，另一个名为.env.development ，然后只需创建那里的变量。

例如，假设我们想要一个名为api-path的环境变量，因此在每个名为VUE_APP_API_PATH的文件中创建一个变量（例如在开发环境中VUE_APP_API_PATH = http://localhost:3000 ）。

然后，您可以在需要此值的脚本中使用let API_route = process.env.VUE_APP_ROOT_API检索这些环境值。

更多信息在这里： https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

希望能帮助到你。