如何让Vite.config.ts动态读取window变量配置assetsDir？

首先明确：你尝试在vite.config.ts中读取浏览器全局window变量的方案不可行。

原因很简单：vite.config.ts是在Node.js构建环境中执行的，这个阶段完全没有浏览器的window对象，自然无法读取到它的变量。构建过程和浏览器运行时是两个完全独立的环境，不能跨环境直接访问变量。

下面是几种能满足你需求的可行方案：

方案1：构建前通过环境变量动态指定资源路径 #

适合提前知道部署路径的场景（比如不同环境的部署目录固定）。

1. 在vite.config.ts中使用环境变量配置资源基础路径：

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

export default defineConfig({
  plugins: [react()],
  // 从环境变量读取基础路径，默认值为根目录
  base: process.env.VITE_ASSETS_BASE || '/',
  build: {
    assetsDir: 'assets' // 资源目录会基于base路径拼接，比如base是/apps/my-react-app/，最终资源路径就是/apps/my-react-app/assets/
  }
})

2. 构建时通过命令行传入对应环境变量：
   比如要部署到/apps/sub-dir-1/目录，执行：

VITE_ASSETS_BASE=/apps/sub-dir-1/ npm run build

Windows环境执行：

set VITE_ASSETS_BASE=/apps/sub-dir-1/ && npm run build

方案2：运行时动态调整资源路径 #

适合部署后才确定资源路径的场景。

子目录部署（HTML和资源同目录） #

如果你的HTML文件和打包后的资源文件始终在同一目录下（不管放在哪个父级子目录），直接设置相对路径即可：

// vite.config.ts
export default defineConfig({
  base: './', // 资源路径会相对于当前HTML文件的位置加载
  build: {
    assetsDir: 'assets'
  }
})

这样不管HTML放在/apps/a/还是/apps/b/，资源都会自动从当前HTML的同级assets目录加载，无需额外配置。

资源独立部署（比如CDN或其他子目录） #

如果资源和HTML不在同一目录，可通过全局变量动态调整基础路径：

1. 在index.html中添加全局变量（部署时根据实际情况修改这个值）：

<script>
  // 示例：资源部署在/apps/shared-assets/目录
  window.ASSETS_BASE = '/apps/shared-assets/'
</script>

2. 在React入口文件（src/main.tsx）中动态修改文档的基础URI：

if (window.ASSETS_BASE) {
  document.baseURI = window.ASSETS_BASE
}

3. 同时在vite.config.ts中设置空基础路径：

export default defineConfig({
  base: '', // 让资源路径基于document.baseURI解析
  build: {
    assetsDir: 'assets'
  }
})

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