构建Vite React应用后如何通过window.ENV_NAME设置Base URL

我有一个Vite React应用，无法预先设置Base URL。使用Azure运行构建流水线并创建发布版本，存在多环境部署场景，部署路径格式为：

{hostname}/{envName}/{appName}/{reactRouting}

只有在构建流水线完成后、针对特定环境创建发布版本时，才能知晓envName的值，且可在发布阶段设置window.ENV_NAME。请问能否在构建完成后，通过window.ENV_NAME来设置Base URL？

可行方案：运行时动态配置Base URL #

完全可以实现，核心思路是在应用运行时读取window.ENV_NAME，动态适配路由和资源路径，具体步骤如下：

1. 配置Vite使用相对资源路径 #

在vite.config.js中将base设为相对路径，让构建后的资源路径不绑定固定前缀，适配任意子目录：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: './', // 关键：用相对路径让资源适配动态子目录
});

2. 动态设置React Router的basename #

如果使用React Router v6+，在路由根组件中读取window.ENV_NAME，拼接完整的基础路径：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  // 拼接符合要求的base路径：/envName/appName
  const basePath = `/${window.ENV_NAME}/your-app-name`;

  return (
    <BrowserRouter basename={basePath}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

3. 动态生成资源路径（可选） #

如果有需要动态加载的静态资源（如图片、文件），可以封装工具函数统一处理路径：

export const getAssetPath = (assetRelativePath) => {
  const basePath = `/${window.ENV_NAME}/your-app-name`;
  // 去除资源路径开头的斜杠，避免重复拼接
  const cleanPath = assetRelativePath.replace(/^\//, '');
  return `${basePath}/${cleanPath}`;
};

// 使用示例
<img src={getAssetPath('images/logo.png')} alt="应用Logo" />

4. Azure发布阶段注入ENV_NAME #

在index.html的<head>中预留占位符，然后在Azure发布流水线中替换为实际环境名：

• 首先在index.html中添加脚本占位：

<head>
  <!-- 其他meta标签 -->
  <script>window.ENV_NAME = '__ENV_NAME_PLACEHOLDER__';</script>
</head>

• 在Azure发布任务中，使用文件转换工具或PowerShell脚本，将__ENV_NAME_PLACEHOLDER__替换为当前环境的名称（如dev、staging、prod）。

注意事项 #

• 确保window.ENV_NAME在React应用初始化前完成注入，避免出现未定义错误。
• React Router的Link组件会自动基于basename生成正确的跳转链接，无需额外处理。
• 本地测试时，可以手动在浏览器控制台执行window.ENV_NAME = 'test'来验证效果。

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