如何解决部署后的React-Vite应用出现的404错误？

核心原因 #

Vite默认将资源路径设置为根目录（/），当你部署到/subscriber子目录时，构建后的资源会尝试从根目录加载，而非/subscriber目录，导致404错误。

解决步骤 #

1. 修改Vite配置文件 #

打开项目根目录下的vite.config.js（或vite.config.ts），添加base配置项，指定你的子目录路径：

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

export default defineConfig({
  plugins: [react()],
  base: '/subscriber/' // 注意路径前后都需要斜杠
});

2. 重新构建并上传 #

执行构建命令重新生成dist目录：

npm run build

将新生成的dist目录下的所有文件，完整上传到服务器的subscriber目录中。

3. 验证资源路径 #

打开服务器上subscriber目录下的index.html，检查js、css等资源的src/href属性，确认路径已变为/subscriber/index-77febc61.js这类格式，而非根目录路径。

4. 服务器路由 fallback 配置（可选但必要） #

如果后续刷新页面或访问子路由时仍出现404，需要配置服务器将所有/subscriber下的请求 fallback 到index.html：

• Nginx 示例：

  location /subscriber {
    alias /usr/share/nginx/html/subscriber; # 替换为你的实际文件路径
    try_files $uri $uri/ /subscriber/index.html;
  }
  

• Apache 示例：
  在subscriber目录下创建.htaccess文件，添加：

  RewriteEngine On
  RewriteBase /subscriber/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /subscriber/index.html [L]
  

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