当我在 Vite 中使用“npm run buid”时，“import.meta.env”。被 dist 中的 {} 取代

Question

我需要使用密钥来获取 API。我和维特一起工作。我希望在开发环境中使用我的密钥，因此我使用我的密钥创建了一个文件 env.development.local :

VITE_KEY=myKey

并且它在开发中工作得很好：import.meta.env.VITE_KEY 被 myKey 替换，我可以使用它。

我没有创建文件 env.Production，因为我不想在 gitHub 上公开显示我的密钥，所以我不希望它出现在 dist 目录中的 Javascript 文件中。

我想在 Vercel 上声明一个用于生产的环境变量，或者在 github 上声明一个秘密操作，其中包含我的 VITE_KEY。但这是行不通的。我注意到，当我运行“npm run build”来捆绑文件进行分发时，import.meta.env.VITE_KEY 被 {}.VITE_KEY 替换。这正常吗？

如何通过 vercel 或 github 等外部服务在生产中声明和使用此环境变量？我搜索了几个小时，但找不到这个问题的任何答案......

Answer 1

正如我在评论中提到的，该变量正在被

{}.VITE_KEY

替换，因为 在生产构建过程中找不到该变量

即您仅为开发环境定义了它 -

.env.local

。

你可以做什么：

1. 使用

   .env

   来照顾本地和生产环境，或者
2. 添加

   .env.production

   文件 但确保将其添加到

   .gitignore

   文件，这样它就不会被推送到 GitHub。

即您的

.gitginore

文件应包含以下内容：

#Ignore .env files
.env
.env.local
.env.production

这样，

.env.production

文件也会被忽略。

如果这可以解决问题，请告诉我。