GitHub Pages相对链接失效求助：随机项目跳转本地正常线上异常

数据老陈

2026-7-30

解决方案

1. 动态生成适配本地与GitHub Pages的Base URL

写个工具函数自动识别当前环境的根路径，不用硬编码仓库名：

function getBaseUrl() {
  // 从当前路径中提取仓库名（GitHub Pages格式：/repo-name/xxx）
  const pathSegments = window.location.pathname.split('/').filter(segment => segment);
  // 判断是否是GitHub Pages环境，本地环境直接用根路径
  const repoName = pathSegments.length > 0 && window.location.host.includes('.github.io') ? pathSegments[0] : '';
  return `${window.location.origin}/${repoName}`;
}

这个函数会自动处理两种场景：

本地环境：返回你的本地服务地址（比如http://localhost:5500）
GitHub Pages环境：返回https://username.github.io/repo-name

2. 修复模块加载错误

子页面加载nav.js时，用动态生成的Base URL拼接路径，避免404和MIME类型报错：

const baseUrl = getBaseUrl();
// 动态创建脚本标签加载模块
const script = document.createElement('script');
script.type = 'module';
script.src = `${baseUrl}/nav.js`;
document.head.appendChild(script);

或者更省心的方式：在根目录的index.html头部添加动态<base>标签，让所有相对路径自动适配根路径：

<!-- 放在根index.html的<head>里 -->
<script>
  const baseUrl = getBaseUrl();
  document.write(`<base href="${baseUrl}/">`);
</script>

3. 修正随机跳转链接

在nav.js里生成跳转链接时，用Base URL拼接数组里的相对路径：

// 假设你的链接数组是：const projectLinks = ['project1/index.html', 'project2/index.html', ...];
const baseUrl = getBaseUrl();
const randomLink = projectLinks[Math.floor(Math.random() * projectLinks.length)];
const fullUrl = `${baseUrl}/${randomLink}`;
window.location.href = fullUrl;