Azure Web App部署React/Vite应用无法读取环境变量问题

核心问题 #

Vite的环境变量是构建时注入的，必须在执行npm run build的阶段传入，你之前把环境变量配置在deploy步骤，这时候已经完成构建了，变量根本没被打包进静态资源里。

具体修复步骤 #

1. 调整YAML流水线，把环境变量移到构建步骤
   找到流水线里执行npm run build的环节，在这个步骤里注入环境变量，而不是deploy阶段。正确的YAML代码示例：

   - name: 构建Vite应用
     run: npm run build
     env:
       VITE_HOST_API: ${{ vars.BASE_URL_STAGING }}
   

   注意：GitHub变量/密钥的引用要正确，公开变量用${{ vars.变量名 }}，保密密钥用${{ secrets.变量名 }}，之前直接写$BASE_URL_STAGING是错误的语法。

2. 移除Azure Web App里的VITE_前缀环境变量
   因为Vite构建完成后，环境变量已经硬编码到静态文件中了，Azure运行时的环境变量对静态资源不起作用，留着反而容易混淆。

3. 验证代码和本地构建

   • 确认前端代码里的变量名拼写正确：import.meta.env.VITE_HOST_API，Vite要求环境变量必须以VITE_开头，不能少。
   • 本地执行VITE_HOST_API=https://staging.api.my-website.com npm run build，然后查看构建后的dist文件夹里的js文件，搜索是否包含正确的API地址，验证本地构建是否正常。

4. 放弃process-envify
   Vite原生使用import.meta.env，和Node的process.env不是一套体系，用process-envify完全没用，直接用Vite的原生方式即可。

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