如何在Azure静态Web应用生产环境中访问React VITE环境变量？

核心原因 #

Vite对import.meta.env.VITE_*的处理是构建时静态替换——变量值会在编译阶段被硬编码到生成的静态JS文件中。部署到Azure后，门户里的应用设置属于服务器端运行时环境变量，前端静态应用无法直接读取这类变量，因为构建后的代码已经固定，后期修改门户设置不会更新已编译的文件。

解决方案1：构建阶段注入变量（推荐，符合Vite原生机制） #

步骤1：流水线中获取Vault变量

在Azure Pipelines任务中，先从Azure Key Vault拉取VITE_VALUETOGET变量，并将其设置为流水线的环境变量（必须保留VITE_前缀，Vite会自动识别这类变量）。

步骤2：构建时传入环境变量

在流水线的构建步骤中，执行构建命令时直接注入变量：

VITE_VALUETOGET=$(VITE_VALUETOGET) npm run build

Vite会在构建时自动读取该环境变量，替换代码中的import.meta.env.VITE_VALUETOGET，生成的静态文件将包含正确的变量值。

步骤3：移除冗余配置

无需手动使用replace插件，Vite原生支持VITE_前缀的环境变量处理，恢复vite.config.js为正常配置：

export default defineConfig({
  plugins: [react()],
});

解决方案2：运行时动态获取（适合无需重新构建即可修改变量的场景） #

如果需要频繁调整变量且不想重新构建应用，可通过以下方式动态获取：

1. 在Azure App Service的wwwroot目录下创建config.json文件：

   {
     "VITE_VALUETOGET": "你的变量值"
   }
   

2. 用流水线部署时，通过文件替换任务，将Key Vault中的变量值写入该JSON文件。
3. 前端代码中通过请求加载配置：

   async function getConfig() {
     const res = await fetch('/config.json');
     const config = await res.json();
     console.log("value", config.VITE_VALUETOGET);
     return config;
   }
   getConfig();
   

之前尝试无效的原因 #

• 直接在Azure门户添加应用设置：前端静态应用无法读取服务器端运行时环境变量，这类变量仅适用于后端代码。
• 流水线导出变量但未在构建时注入：如果构建命令执行时process.env.VITE_VALUETOGET不存在，replace插件会将代码替换为undefined，核心问题是构建阶段变量未被正确传入。

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