react-create-app生产环境无法访问public文件夹静态HTML页面求助

嘿，这个问题我之前开发PWA应用时也踩过坑！确实是默认的Service Worker在搞鬼——Create React App（CRA）自带的Workbox配置会将大部分请求导向主应用的index.html，哪怕你访问的是public文件夹里的独立静态页面。下面给你几个可行的解决方案：

方案1：自定义Service Worker规则，排除静态页面 #

如果你的项目需要保留PWA特性（离线缓存、推送等），可以通过自定义Service Worker来绕过对静态页面的拦截：

1. 在项目src目录下创建service-worker.js文件（如果还没有的话）
2. 添加以下代码，排除你的静态页面（比如legal.html）并单独配置缓存策略：

import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

// 预缓存主应用资源，但排除legal.html
precacheAndRoute(self.__WB_MANIFEST.filter(entry => !entry.url.includes('legal.html')));

// 对legal.html使用"先返回缓存，再后台更新"的策略，也可以直接设置为不缓存
registerRoute(
  ({ url }) => url.pathname === '/legal.html',
  new StaleWhileRevalidate()
);

3. 在src/index.js中确保注册的是这个自定义Service Worker：

import * as serviceWorkerRegistration from './service-worker';
serviceWorkerRegistration.register();

方案2：直接禁用Service Worker（如果不需要PWA功能） #

如果你的应用不需要离线访问等PWA特性，最简单的方法就是关掉Service Worker：

找到src/index.js中的这段代码：

// serviceWorkerRegistration.register();

把它注释掉，或者改成：

serviceWorkerRegistration.unregister();

重新build项目后，生产环境就不会有Service Worker拦截请求了，静态页面就能正常访问。

方案3：通过部署服务器配置优先匹配静态文件 #

如果你用Nginx（或类似服务器）部署，可以通过修改服务器配置，让服务器优先查找静态文件，再 fallback到React主应用：

以Nginx为例，修改nginx.conf的配置：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/build/folder;

  # 优先匹配legal.html，存在则直接返回
  location = /legal.html {
    try_files $uri =404;
  }

  # 其他请求再fallback到index.html
  location / {
    try_files $uri $uri/ /index.html;
  }
}

这样Nginx会先检查请求的静态文件是否存在，避免Service Worker拦截静态页面的请求。

注意事项 #

• 修改Service Worker配置后，一定要重新执行npm run build生成新的生产包
• 如果之前已经有用户访问过应用，他们的浏览器可能缓存了旧的Service Worker，测试时可以手动清除浏览器缓存，或者在应用中加入Service Worker更新提示

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