Vite构建时import.meta.env被替换为{}，生产环境变量配置求助

问题说明 #

打包后import.meta.env.VITE_KEY被替换成{}.VITE_KEY是不正常的，这说明构建过程中Vite没正确读取到生产环境变量，导致变量替换失败。

Vercel上的配置方法 #

• 登录Vercel控制台，找到你的项目
• 进入「Settings」→「Environment Variables」页面
• 点击「Add」按钮添加变量：
  • 变量名填VITE_KEY，值填你的密钥
  • 「Environment」选「Production」（也可以选All Environments覆盖所有环境）
  • 保存后重新触发部署——要么手动在Deployments页面点Redeploy，要么推代码触发
• 注意：Vercel会在构建阶段自动注入这些变量，只要变量名以VITE_开头，Vite就能识别，不用额外改Vite配置

GitHub Actions上的配置方法 #

• 打开GitHub仓库的「Settings」→「Secrets and variables」→「Actions」页面
• 点击「New repository secret」，添加名为VITE_KEY的密钥，值填你的密钥
• 编辑你的Actions构建脚本（比如.github/workflows/build.yml），在构建步骤里注入环境变量：

  jobs:
    build:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v4
        - name: 安装依赖
          run: npm install
        - name: 构建项目
          run: npm run build
          env:
            VITE_KEY: ${{ secrets.VITE_KEY }}
  

• 提交这个配置文件后，下次Actions运行时，Vite就能在构建时读取到VITE_KEY

额外提醒 #

• 客户端代码里要用的环境变量，必须以VITE_开头，Vite才会把它注入打包后的代码
• 绝对不要在代码里硬写密钥，全程用环境变量传递
• 本地测生产环境变量的话，可以建env.production.local文件（记得把这个文件加到.gitignore里），配置VITE_KEY=你的测试密钥，然后跑npm run build测试

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