如何使用 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

希望能幫助到你。