如何在自有网站子路径部署Create React App并解决Root容器为空问题？

我之前也碰到过一模一样的问题！核心原因是Create React App默认假设你的应用部署在域名根目录下，当部署到子路径时，它找不到正确的静态资源路径，自然没法完成应用初始化，导致root容器是空的。下面分步骤帮你解决：

1. 配置package.json的homepage字段 #

这是最关键的一步，必须告诉CRA你的应用部署的基础路径：

• 如果你的应用部署在mywebsite.com/first-project/（对应服务器上的first-project子目录），打开项目根目录的package.json，添加：

  "homepage": "/first-project/"
  

• 如果你是把build产物对应到mywebsite.com/first-project.html的访问路径（比如服务器根目录下有first-project文件夹，里面放着所有build文件），也可以把homepage设为"./"，这样资源会使用相对路径加载，适配各种子路径场景。

配置完成后，重新执行npm run build生成新的build包，再上传到服务器对应路径。

2. 处理React Router路由（如果用到的话） #

如果你的项目用了React Router，光设置homepage还不够，需要给路由组件添加basename属性：

• 如果你用的是BrowserRouter，修改路由包裹代码：

  import { BrowserRouter } from 'react-router-dom';
  
  function App() {
    return (
      <BrowserRouter basename="/first-project">
        {/* 你的路由组件内容 */}
      </BrowserRouter>
    );
  }
  

• 要是不想折腾服务器配置，也可以改用HashRouter，它不需要依赖服务器重写规则，路径会带#（比如mywebsite.com/first-project/#/about），对静态服务器更友好。

3. 验证静态资源路径 #

上传build包后，打开浏览器控制台（F12），切换到Network标签页，看看有没有404的资源（比如css、js文件）。如果有，要么是homepage配置和实际部署路径不匹配，要么是你上传的位置不对——举个例子：如果homepage设为/first-project/，那你得把build文件夹里的所有文件上传到服务器的first-project目录下，不能直接丢网站根目录。

4. 服务器配置（针对BrowserRouter的刷新问题） #

如果用了BrowserRouter，在应用内刷新页面时可能会出现404错误，这时候需要配置服务器的重写规则：

• Apache：在你的子目录下创建.htaccess文件，添加：

  Options -MultiViews
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^ index.html [L]
  

• Nginx：在server配置里添加：

  location /first-project/ {
    try_files $uri $uri/ /first-project/index.html;
  }
  

这一步是让服务器在找不到对应文件时，返回React的index.html，交给React Router处理路由逻辑。

做完这些步骤后，你的应用应该就能正常渲染了！

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