如何配置create-react-app从/admin/子目录提供React SPA服务？

其实你不用担心homepage必须填完整URL的问题，它完全支持相对路径！我帮你梳理下具体的配置步骤，亲测能解决你的需求：

1. 设置package.json的homepage属性 #

在项目根目录的package.json里添加或修改homepage字段，直接设为"/admin/"即可，不需要完整的域名：

{
  "name": "your-admin-panel",
  "homepage": "/admin/",
  // ... 其他配置
}

这样打包后，所有静态资源（JS、CSS、图片等）的引用路径都会自动加上/admin/前缀，不会出现资源加载404的问题。

2. 配置React路由（如果使用react-router） #

如果你的管理面板用到了React Router，需要给路由组件加上basename属性，确保路由跳转也适配子目录：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router basename="/admin">
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        {/* 其他路由 */}
      </Routes>
    </Router>
  );
}

这里的basename="/admin"会让所有路由路径自动带上/admin前缀，比如访问/settings实际对应的URL是https://smyapp.example.com/admin/settings。

3. 服务器端配置（关键！） #

最后要确保你的服务器能正确处理SPA的路由请求，把所有/admin/下的请求都指向打包后的index.html，避免刷新页面出现404。以Nginx为例，你可以在配置文件里添加这样的规则：

location /admin/ {
  root /path/to/your/deployed/files;
  try_files $uri $uri/ /admin/index.html;
}

如果是Apache的话，需要创建.htaccess文件（放在admin目录下）：

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

这样配置完之后，你的React SPA就能完美在https://smyapp.example.com/admin/路径下运行了，不管是资源加载还是路由跳转都不会有问题~

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