开发环境正常的动态页眉页脚，部署至GitHub Pages后无法加载

核心问题分析 #

你遇到的问题根源是GitHub Pages的部署路径特性：本地开发时站点运行在根域名（http://localhost:xxxx/），但部署到GitHub Pages后，站点通常处于仓库名对应的子路径下（比如https://your-username.github.io/your-repo-name/）。

你代码里用的/components/header/header.html是根绝对路径，在本地会指向http://localhost:xxxx/components/...，但在GitHub Pages会指向https://your-username.github.io/components/...，而你的组件实际存储在https://your-username.github.io/your-repo-name/components/...，因此会返回404，导致组件加载失败。

解决方案 #

方案1：改用相对路径（最简单直接） #

去掉组件路径开头的斜杠，使用相对于当前HTML文件的相对路径。由于你的index.html在根目录，直接写components/header/header.html即可：

修改后的代码：

document.addEventListener("DOMContentLoaded", function() {
    // 动态添加favicon
    const addFavicon = () => {
        const link = document.createElement('link');
        link.rel = 'icon';
        link.href = 'favicon.ico'; // 相对路径，适配本地和GitHub Pages
        link.type = 'image/x-icon';
        document.head.appendChild(link);
    };

    // 获取HTML组件并插入指定选择器
    const loadComponent = (selector, url) => {
        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`Failed to load ${url}: ${response.status} ${response.statusText}`);
                }
                return response.text();
            })
            .then(data => {
                const element = document.querySelector(selector);
                if (element) {
                    element.innerHTML = data;
                } else {
                    console.error(`Element with selector "${selector}" not found.`);
                }
            })
            .catch(error => console.error(`Error loading component from ${url}:`, error));
    };

    // 初始化全局功能
    const initializeGlobals = () => {
        addFavicon();
        // 去掉路径开头的斜杠，使用相对路径
        loadComponent("#header", "components/header/header.html");
        loadComponent("#footer", "components/footer/footer.html");
    };

    initializeGlobals();
});

方案2：动态适配基础路径（适配多级页面场景） #

如果你的站点有子页面（比如pages/about.html），相对路径需要调整为../components/header/header.html，这种场景下可以动态获取站点的基础路径：

// 获取当前站点的基础路径（适配GitHub Pages子路径）
const getBasePath = () => {
    const repoName = window.location.pathname.split('/')[1];
    return window.location.hostname.includes('github.io') ? `/${repoName}/` : '/';
};

// 初始化时拼接路径
const basePath = getBasePath();
loadComponent("#header", `${basePath}components/header/header.html`);
loadComponent("#footer", `${basePath}components/footer/footer.html`);

验证方法 #

部署后打开浏览器开发者工具（F12），切换到Network标签页，查看header.html和footer.html的请求地址：

• 如果返回404，检查路径是否与实际文件位置匹配
• 如果路径正确但加载失败，确认GitHub Pages部署已完成，文件已正确上传

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