如何解决基于Monorepo的React应用部署IIS后资源缺失问题

1. 修正React构建的公共路径 #

Monorepo构建的React应用，默认资源引用可能是绝对路径，导致部署到子文件夹时找不到资源。根据你的构建工具调整publicPath：

• Create React App：在项目的package.json里添加"homepage": "./"（相对路径），如果是部署在域名子路径下（比如http://xxx.com/my-project），就设为"/my-project/"
• Vite：在vite.config.js中设置base: './'，同样子路径场景设为对应路径
  修改后重新构建，确保资源引用是相对当前目录的。

2. 配置IIS MIME类型 #

IIS默认可能不识别部分React构建资源的类型，导致返回404：

• 打开IIS管理器，选中你的站点 → 功能视图 → 点击「MIME类型」
• 点击「添加」，补充以下类型：
  • 扩展名：.css，MIME类型：text/css
  • 扩展名：.js，MIME类型：application/javascript
  • 扩展名：.svg，MIME类型：image/svg+xml
  • 扩展名：.json，MIME类型：application/json
  • 字体资源比如.woff2，对应MIME类型font/woff2，按需添加

3. 调整URL重写规则 #

你已经用了重路由模块，但要确保规则不会拦截静态资源：

• 打开IIS管理器 → 选中站点 → URL重写 → 添加空白规则
• 规则配置：
  • 名称：React SPA Rewrite
  • 匹配URL：.*（匹配所有请求）
  • 条件：添加条件，输入{REQUEST_FILENAME}，选择「不匹配模式」，模式填^.+\.(css|js|png|jpg|svg|json|woff2|ico)$（覆盖所有静态资源后缀）
  • 操作：选择「重写」，重写URL为/index.html
    这样静态资源会直接返回，其他请求都指向SPA入口，既解决路由问题又不影响资源加载。

4. 启用IIS静态文件功能 #

如果没开启静态文件功能，IIS无法返回CSS/JS等资源：

• 打开服务器管理器 → 添加角色和功能 → 找到「Web服务器（IIS）」→ 「Web服务器」→ 「常见HTTP功能」→ 勾选「静态文件」，完成安装

5. 检查文件夹权限 #

确保IIS应用池有权限读取my-project文件夹：

• 右键apps/my-project文件夹 → 属性 → 安全 → 编辑 → 添加 → 输入IIS AppPool\[你的应用池名称]（默认是IIS AppPool\DefaultAppPool）
• 给该用户分配「读取」和「列出文件夹内容」权限

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