Vite生产环境无法访问public目录静态资源返回React应用404页面

这不是Vite本身的Bug，是三类配置错误共同导致的：

• 部分场景下Vite未显式配置base路径会导致静态资源引用路径异常
• 部署时的SPA路由回退规则优先级错误，把静态资源请求也转发到了index.html，最终被React Router接管返回前端404页面
• 极少数情况是构建时public目录文件未被正确拷贝到产物目录

1. 补全vite.config.js基础配置 #

在配置中显式声明项目部署的base路径，避免资源路径解析异常：

export default defineConfig({
    // 根路径部署填'/'，子路径部署填对应子目录即可
    base: '/',
    build: {
        outDir: 'build',
    },
    plugins: [
        react({ babel: { plugins: ['babel-plugin-styled-components'] } }),
        VitePWA({ registerType: 'autoUpdate', devOptions: { enabled: true } }),
        svgr,
        eslintPlugin,
        stylelintPlugin,
    ],
});

2. 本地验证构建产物正确性 #

执行本地构建命令：

npm run build

构建完成后检查build目录，确认public下的所有文件（images/logo.png、robots.txt、manifest.json等）都被直接拷贝到了build目录的根路径，没有被嵌套在额外的子文件夹中。如果文件缺失，检查public目录是否和vite.config.js、package.json处于同一级目录（你当前的目录结构是符合要求的）。

3. 修正部署服务的SPA回退规则（核心修复点） #

静态资源返回React 404页面，90%以上概率是托管服务的路由回退规则把所有请求（包括静态资源请求）都重写到了index.html，必须调整规则优先级：静态资源请求优先匹配返回本地文件，剩下的非静态请求才回退到index.html交给React Router处理。
不同托管环境的参考配置：

• Nginx服务：

server {
  listen 80;
  server_name movielust.in;
  root /your/actual/project/build/path;
  index index.html;

  # 优先匹配静态资源，直接返回文件，不走路由回退
  location ~* \.(png|jpg|jpeg|gif|ico|css|js|txt|json|svg|woff|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    try_files $uri =404;
  }

  # 剩余所有路由请求才回退到index.html
  location / {
    try_files $uri $uri/ /index.html;
  }
}

• Vercel托管：在项目根目录新建vercel.json，排除静态资源后缀的请求再做回退：

{
  "rewrites": [
    {
      "source": "/((?!.*\.(png|jpg|jpeg|gif|ico|css|js|txt|json|svg|woff|woff2|html)).*)",
      "destination": "/index.html"
    }
  ]
}

• Netlify托管：在public目录下新建_redirects文件，Netlify默认会优先返回存在的静态文件，不会被回退规则覆盖，写入以下内容即可：

/*    /index.html   200

4. 检查React Router配置 #

如果使用React Router v6，确保通配符*的404路由放在所有路由配置的最末尾，不要提前拦截合法的静态资源请求。

重新构建部署后，访问图片路径，打开浏览器开发者工具看网络面板：

• 如果响应头Content-Type为image/png，说明配置生效
• 如果Content-Type为text/html，说明请求还是被回退到了index.html，回头检查部署的回退规则优先级。

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