代码在Live Server可正常运行但部署至GitHub Pages后无法工作

首先说明：你控制台看到的Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.是GitHub Pages服务端默认配置导致的通用警告，和你的页面功能异常完全无关，所有部署在GitHub Pages的站点都会出现这条提示，不需要处理。

本地Live Server运行正常、GitHub Pages部署异常，90%以上是路径适配问题，剩下的是路由、文件大小写、部署配置问题，具体对应：

• 资源绝对路径适配错误：如果你用的是普通项目仓库（不是<用户名>.github.io命名的根仓库），部署后的站点根路径是https://<用户名>.github.io/<仓库名>/，不是域名根。如果你代码里写了以/开头的绝对资源路径（比如/static/js/main.js、/css/style.css），部署后请求会发到https://<用户名>.github.io/static/...，直接404找不到资源，导致样式、脚本全失效，页面空白。
• 文件路径大小写不匹配：本地Windows、macOS文件系统默认不区分路径大小写，比如你代码里引/Img/Logo.png，实际文件存的是/img/logo.png本地能正常加载，但GitHub Pages跑在Linux系统上，严格区分大小写，路径大小写不一致就会加载失败。
• 前端路由History模式未适配：如果用了Vue Router、React Router等框架的History路由模式，本地Live Server做了重定向配置所以访问正常，GitHub Pages默认没有配置单页应用的路由回退，直接访问子路由、刷新子页面时会返回404。
• 部署配置错误：GitHub Pages设置里选错了部署分支、部署目录，导致服务端加载的不是你构建后的产物文件，是原始源码或者空目录。

• 打开浏览器开发者工具，切换到「网络」面板，刷新页面，筛选所有请求失败（状态码404）的资源，核对请求URL：如果URL里缺少你的仓库名前缀，就修改构建配置：Vite项目加base: '/你的仓库名/'配置，Vue CLI/React Scripts项目加"homepage": "https://<你的用户名>.github.io/<你的仓库名>/"到package.json，或者把所有绝对路径改成./开头的相对路径。
• 全局检查所有资源引用、组件导入的路径大小写，和仓库里实际存储的文件/文件夹名完全保持一致，不要出现大小写偏差。
• 如果用了History模式路由，两种修复方案：一是把路由模式改成Hash模式（地址带#，不需要服务端支持）；二是在部署目录里放一个和index.html内容完全一致的404.html文件，GitHub Pages遇到404请求时会返回这个文件，由前端路由接管页面渲染。
• 进入仓库的Settings -> Pages配置页，确认部署分支、部署目录选择正确：如果你是把构建后的dist目录推到gh-pages分支，就选gh-pages分支根目录；如果是推到main分支的docs目录，就选main分支的docs目录，确保部署目录下放的是本地执行构建命令后生成的所有静态产物，不是项目源码。

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