React项目npm run build未含全部文件，子域名部署仅显首页求助

嘿，作为React新手第一次部署项目确实容易踩这类坑，我来帮你一步步梳理解决~

先给你吃个定心丸：Build肯定包含了所有用到的文件 #

React的打包工具（webpack）会自动把所有被项目引用的文件（包括src下的组件、页面）都打包到build文件夹里，不会出现“漏打包pages文件”的情况——毕竟你本地用server -s build能正常访问所有页面，就说明打包本身是没问题的。问题大概率出在路由配置和服务器重定向规则上，和子域名部署有直接关系。

核心问题：SPA路由的特性 + 服务器配置 #

React是单页应用（SPA），所有页面跳转都是前端路由在处理，而服务器默认只会处理静态文件的请求。当你部署到子域名后，直接访问非首页路径（比如sub.yourdomain.com/contact）时，服务器会误以为要找这个路径下的静态文件，找不到就返回404，这就是你只能看到首页的原因。下面是具体的解决步骤：

1. 配置React Router的basename（按需设置） #

如果你的项目是直接部署在子域名的根目录下（比如sub.yourdomain.com直接指向build文件夹），那basename设为"/"即可；如果是部署在子域名下的某个子文件夹（比如sub.yourdomain.com/my-project），就需要把basename设为对应的子路径。

以React Router v6为例，修改你的路由入口文件：

import { BrowserRouter } from 'react-router-dom';

function App() {
  // 子域名根目录就写"/"，子路径就写"/my-project"
  return (
    <BrowserRouter basename="/">
      {/* 你的路由组件 */}
    </BrowserRouter>
  );
}

2. 配置服务器的重定向规则（关键！） #

必须让服务器把所有找不到静态文件的请求，都重定向到index.html，让前端路由来处理。不同服务器的配置方式如下：

• Nginx：在你的子域名配置块中添加这段规则：

location / {
  try_files $uri $uri/ /index.html;
}

修改后重启Nginx生效。

• Apache：在build文件夹里新建.htaccess文件，写入以下内容：

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

• Caddy：在你的子域名配置中添加错误处理规则：

handle_errors {
  rewrite * /index.html
}

3. 检查路由组件的注册 #

确认你pages里的页面组件都在路由中正确注册了，比如：

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './elements/About'; // 对应你elements下的页面文件

function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      {/* 其他页面路由 */}
    </Routes>
  );
}

确保路由路径和你访问的URL完全一致，没有拼写错误。

最后验证步骤 #

1. 重新执行npm run build，把最新的build文件夹上传到服务器。
2. 确认服务器配置已经修改并重启。
3. 直接访问子域名下的非首页路径（比如sub.yourdomain.com/about），看是否能正常显示页面。

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