修改React应用title标签后线上站点浏览器标题不更新如何解决

按优先级依次排查以下场景：

• 构建配置覆盖静态title
  绝大多数前端脚手架（Vite/Vue CLI/Create React App等）支持在构建配置文件中单独声明站点title，构建阶段会自动替换public/index.html内的硬编码title值，部分框架本地开发伺服的html不会触发该替换逻辑，就会出现本地显示正常、线上构建后被覆盖的问题。
  全局搜索项目配置文件（vite.config.js/vue.config.js/craco.config.js等）内的title字段，将值修改为目标title后重新构建部署即可。
• 缓存导致旧资源未更新
  线上站点的html文件如果被浏览器或者CDN节点缓存，会持续返回旧版本页面：
  1. 先执行硬刷新验证：Windows端按Ctrl+F5、Mac端按Cmd+Shift+R强制拉取最新资源
  2. 如果硬刷新后正常，给站点html文件配置Cache-Control: no-cache响应头，或者每次部署时给静态资源加版本hash，避免缓存旧资源
• 运行时逻辑动态修改title
  全局搜索项目代码中的document.title关键词，检查是否存在路由守卫、页面生命周期钩子、第三方依赖（如动态title插件、SEO插件）在页面加载后执行title赋值逻辑，这类JS运行时修改的优先级高于html静态title，会直接覆盖你写在index.html里的值，修改对应赋值逻辑为目标title即可。
• 部署文件版本错误
  直接拉取线上根目录的index.html文件，查看源码中<title>标签内容，如果仍是旧值，说明构建或部署流程出错：重新执行npm run build（或对应项目的构建命令）生成最新dist产物，全量上传覆盖线上部署目录的文件即可。

问题相关截图 #

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