React项目部署至WordPress生产环境遇Uncaught SyntaxError求助

这个错误本质是浏览器尝试解析JavaScript/CSS资源时，拿到的却是HTML内容（比如404页面、WordPress默认页面），导致语法解析失败。结合你的部署场景，以下是针对性的排查和解决方法：

1. 修正React打包的资源路径 #

默认create-react-app打包会使用绝对路径（/开头），如果你的React项目部署在WordPress的子目录（比如wp-content/themes/your-theme/react-app/）或者WordPress本身不在服务器根目录，绝对路径会导致资源找不到，返回WordPress的404 HTML。

• 修改package.json，添加homepage字段指定部署路径：

  // 若部署在WordPress子页面下，比如/rrhh/
  "homepage": "/rrhh/"
  // 若部署在相对路径下，比如主题内的某个文件夹
  "homepage": "./"
  

• 重新执行npm run build，打包后的资源路径会自动适配，避免404问题。

2. 检查WordPress的静态资源引用 #

• 将React打包后的build目录所有文件（包括static文件夹、图标等）上传到WordPress主题目录的自定义文件夹（比如wp-content/themes/your-theme/react-build/）。
• 在WordPress页面嵌入React时，用WordPress的路径函数生成正确的资源URL，不要用硬编码的绝对路径：

  <script src="<?php echo get_template_directory_uri(); ?>/react-build/static/js/main.xxxx.js"></script>
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/react-build/static/css/main.xxxx.css">
  

3. 处理React Router与WordPress的路由冲突 #

如果你的React项目用了路由，用户访问React路由路径时，WordPress会优先匹配自身路由，返回404页面，导致React无法加载：

• 在WordPress中创建一个空白页面（比如slug设为rrhh），然后在主题的functions.php中添加路由规则：

  function react_rewrite_rules() {
      add_rewrite_rule('^rrhh(/.*)?$', 'index.php?pagename=rrhh', 'top');
  }
  add_action('init', 'react_rewrite_rules');
  

• 在React Router中设置basename属性匹配WordPress页面路径：

  <BrowserRouter basename="/rrhh">
    {/* 你的路由组件 */}
  </BrowserRouter>
  

• 最后刷新WordPress的固定链接设置（设置→固定链接，任意选择一个保存），让新规则生效。

4. 验证资源加载状态 #

打开浏览器开发者工具（F12）的「网络」标签，刷新页面：

• 若资源状态为404，说明路径错误，回到步骤1、2修正；
• 若资源状态为200但响应内容是HTML，说明路由冲突，回到步骤3处理。

另外你提供的示例HTML中，<link rel="icon" href="/league_logo.png" />用了绝对路径，部署后若图标不在服务器根目录，同样会返回404 HTML，建议改为相对路径或用WordPress路径函数生成正确URL。

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