ReactJS构建的WAR包部署到JBOSS JWS后组件无法显示

1. 检查静态资源路径配置 #

本地开发时 React 默认使用根路径，但部署到 WAR 包后会带有上下文路径，易导致静态资源加载失败。

• 在项目根目录的 package.json 中添加 "homepage": "."，重新执行 npm run build 后再打包 WAR。
• 若使用自定义 Webpack 配置，确保 output.publicPath 设置为 "./"，避免绝对路径引发的资源404。

2. 配置 JBOSS JWS 静态资源映射 #

确保服务器能正确识别 React 生成的静态文件类型，在项目的 web.xml 中添加以下 MIME 映射：

<mime-mapping>
    <extension>js</extension>
    <mime-type>application/javascript</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>css</extension>
    <mime-type>text/css</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>json</extension>
    <mime-type>application/json</mime-type>
</mime-mapping>

同时确认 DefaultServlet 已配置处理所有静态资源请求：

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.js</url-pattern>
    <url-pattern>*.css</url-pattern>
    <url-pattern>*.png</url-pattern>
    <!-- 其他静态资源后缀按需添加 -->
</servlet-mapping>

3. 修复 React 路由配置 #

若使用 BrowserRouter，部署到非根路径时需指定 basename 属性，匹配 WAR 包的上下文路径：

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

ReactDOM.render(
  <BrowserRouter basename="/你的WAR上下文路径">
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

或者改用 HashRouter，避免依赖服务器路由配置：

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

ReactDOM.render(
  <HashRouter>
    <App />
  </HashRouter>,
  document.getElementById('root')
);

4. 排查浏览器控制台错误 #

打开浏览器开发者工具，重点检查：

• Network 标签：查看静态资源（js、css）是否返回404，确认路径是否正确。
• Console 标签：检查是否有JS语法错误、资源加载失败提示，针对性修复。

5. 确认 WAR 包文件完整性 #

解压生成的 WAR 包，验证以下内容：

• index.html 位于 WAR 根目录（webapp 下）
• static/js/、static/css/ 目录下包含所有 build 生成的文件
• 所有资源文件的引用路径与 index.html 中的一致

6. 清理 JBOSS JWS 缓存 #

服务器可能缓存了旧的静态资源，导致新部署内容未生效：

• 重启 JBOSS JWS 服务器
• 清理服务器临时目录（通常位于 JBOSS_HOME/tmp 和 JBOSS_HOME/work）
• 可在 web.xml 中添加缓存控制过滤器，避免后续缓存问题：

<filter>
    <filter-name>CacheControlFilter</filter-name>
    <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
    <init-param>
        <param-name>ExpiresByType text/html</param-name>
        <param-value>access plus 0 seconds</param-value>
    </init-param>
    <init-param>
        <param-name>ExpiresByType application/javascript</param-name>
        <param-value>access plus 1 year</param-value>
    </init-param>
    <init-param>
        <param-name>ExpiresByType text/css</param-name>
        <param-value>access plus 1 year</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CacheControlFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

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