如何使用 vanilla 訪問環境變量 javascript

Question

我有一個index.html ，我需要將一些敏感信息傳遞給一些 JavaScript 變量。 這個 index.html 包含普通的 javascript 和jquery

所以我這樣設置環境變量：

USERNAME="123"
PASSWORD="password"

我需要使用javascript訪問它

<script>

var username = process.env.USERNAME;
var pw   = process.env.PASSWORD;

</script>

但這給出了錯誤

未捕獲的 ReferenceError：未定義進程

也許這是因為我使用的是 vanilla javascript。而且我不能使用除jquery之外的任何其他框架

有人可以幫我怎么做嗎？

Answer 1

我有這個確切的問題要處理，我能夠使用這篇文章創建一個有效的解決方案。 對於這個答案，我將總結我為部署到 Netlify 的項目所采取的步驟並且已經修改以適合您的問題，但是您可以查看文章以查看基本示例並了解更多信息。

注意：此解決方案非常適合信息不完全敏感但您只是不希望它們在代碼中顯示得如此明顯的小型個人項目。 不要用於需要合理級別安全措施的大型項目。

如果您的項目已經部署到 Netlify 或類似的平台，您可以在其中添加構建/部署命令：

1. Go 到build設置
2. 如果要為其使用變量的腳本文件位於文件夾中，請將build命令設置為： cd DIRECTORY-FOR-THE-SCRIPT-FILE && echo -e "export const USERNAME="123";\nexport const PASSWORD="password";" > config.js cd DIRECTORY-FOR-THE-SCRIPT-FILE && echo -e "export const USERNAME="123";\nexport const PASSWORD="password";" > config.js
3. 如果腳本在您的根文件夾中，請將命令設置為此echo -e "export const USERNAME="123";\nexport const PASSWORD="password"; > config.js
4. 在導入腳本的index.html文件中，設置腳本標簽以包含此屬性type="module"即<script src="./index.js" type="module"></script>
5. 在您的腳本文件中，通過將此行添加到文件來導入變量： import {USERNAME, PASSWORD} from "./config.js"
6. 在 Netlify 上手動觸發重新部署，或者如果您已經為 repo 設置了自動部署，它將自動部署。
7. 就這樣！

這解決了我的問題，我希望它能幫助其他人✨。

Answer 2

那么你的環境是什么？ javascript 在前端運行，你在哪里設置環境變量？ 您也許可以使用 fs - https://www.npmjs.com/package/file-system 之類的東西來讀取操作系統上的文件，但我認為大多數瀏覽器都不會允許這樣做