Web应用更新后部分客户端崩溃，求助排查及解决方法

排查方向 #

• 浏览器本地缓存策略：检查老板的浏览器是否开启了「离线工作」模式，或手动设置了强制缓存规则；部分浏览器插件（如广告拦截、隐私工具）也可能篡改缓存行为，可让其用隐私模式访问验证。
• 静态资源缓存配置：确认Tomcat对前端静态文件（JS、CSS、图片等）的HTTP响应头设置，重点看Cache-Control、ETag、Last-Modified字段是否合理——若缓存时间过长，浏览器会持续复用旧资源。
• Vue打包哈希有效性：检查打包后的dist目录，确认JS/CSS文件是否带有[contenthash]后缀（如app.abc123.js）。若文件名无哈希，说明打包配置存在问题，导致更新后浏览器无法识别新资源。
• 后端接口缓存：排查Spring接口是否返回了缓存相关响应头，若接口数据被浏览器或中间代理缓存，会导致页面获取旧数据引发异常。
• 内网代理/CDN缓存：若老板处于公司内网，可能存在网关、代理服务器或CDN缓存了旧版本资源，需确认这类中间节点的缓存策略。

解决办法 #

1. 确保Vue打包生成哈希化资源 #

Vue CLI默认在生产模式下会给静态资源添加哈希，若未生效，可在vue.config.js中手动配置：

module.exports = {
  configureWebpack: {
    output: {
      filename: '[name].[contenthash].js',
      chunkFilename: '[name].[contenthash].js'
    }
  }
}

哈希基于文件内容生成，资源更新后哈希值自动变化，浏览器会请求新文件，彻底避免缓存混淆。

2. 配置Tomcat缓存控制策略 #

在项目的web.xml或Tomcat全局conf/web.xml中添加缓存过滤规则，区分HTML和静态资源的缓存策略：

<filter>
  <filter-name>CacheControlFilter</filter-name>
  <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
  <!-- HTML文件不缓存，确保每次请求获取最新页面 -->
  <init-param>
    <param-name>ExpiresByType text/html</param-name>
    <param-value>access plus 0 seconds</param-value>
  </init-param>
  <!-- JS/CSS缓存1年，依赖哈希文件名更新 -->
  <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>

3. 禁用后端接口缓存 #

在Spring Controller中为接口添加无缓存响应头，避免旧数据被缓存：

@GetMapping("/api/data")
public ResponseEntity<String> getData(HttpServletResponse response) {
    response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
    response.setHeader("Pragma", "no-cache");
    response.setHeader("Expires", "0");
    return ResponseEntity.ok("latest data");
}

4. 排查并修正老板设备的浏览器设置 #

• 关闭浏览器的「离线工作」模式（Chrome：设置→高级→隐私和安全→网站设置→离线访问）；
• 禁用可能影响缓存的浏览器插件，或直接用隐私模式访问验证。

5. 内网缓存处理 #

若存在公司内网代理或CDN，联系运维人员：

• 临时清除对应资源的缓存；
• 配置CDN根据文件名哈希自动更新缓存规则，避免旧资源被持续分发。

内容的提问来源于stack exchange，提问作者Óscar Raya