Vite+Vue3生产环境获取.env变量（.env已加入.gitignore隐藏）

1. .env加入.gitignore为啥会导致生产环境读不到变量？ #

• 肯定会。.gitignore里的文件不会被提交到Git仓库，部署生产环境时如果是从仓库拉取代码，服务器上根本没有这些.env文件，自然拿不到变量。
• 更关键的是：Vite是构建时注入环境变量，不是运行时动态读取.env文件。也就是说，执行vite build的时候，Vite会把变量直接替换到代码里，构建完成的静态文件里已经没有import.meta.env的动态读取逻辑了。如果构建过程中没有对应的.env文件，变量根本不会被注入，生产环境当然拿不到。

2. 既隐藏变量又让生产环境能用的方案 #

方案一：用部署平台的环境变量配置 #

现在主流部署平台（Vercel、Netlify、阿里云、腾讯云等）都提供环境变量配置面板：

• 进入项目设置找到环境变量选项，添加所需变量，记住变量名必须以VITE_开头（Vite默认只将带这个前缀的变量注入到客户端代码中）。
• 配置完成后，平台会在执行vite build时自动把这些变量注入到构建环境，无需在项目中存储.env文件，既避免了变量被提交到Git，又能让生产构建时获取到变量。

方案二：构建前手动注入变量 #

如果是自行搭建的服务器，直接在构建命令前导出变量即可：

• Linux/macOS终端：

  VITE_API_URL=https://prod-api.com vite build
  

• Windows PowerShell：

  $env:VITE_API_URL="https://prod-api.com"; vite build
  

• 嫌每次输入麻烦的话，可以写个简单的脚本文件（比如build-prod.sh），把变量导出后再执行构建，记得把脚本也加入.gitignore不要提交。

方案三：使用.env.production但不提交到Git #

• 创建.env.production文件，写入生产环境的变量（同样要带VITE_前缀），然后把这个文件加入.gitignore，避免提交到仓库。
• 部署时，通过SSH加密传输等安全方式将这个文件传到服务器的项目目录，再执行vite build构建生产包。这种方式适合自行管理服务器的场景，注意文件传输的安全性。

重要提醒 #

• 所有要在客户端代码中使用的变量，必须添加VITE_前缀，Vite会自动忽略不带这个前缀的变量，防止敏感信息（比如数据库密码）泄露到客户端。
• 生产环境构建完成后，变量已经硬编码到静态文件中，要是需要修改变量必须重新构建部署，不能直接修改静态文件。

内容的提问来源于stack exchange，提问作者Stevan Najeeb