GitHub Pages相对路径问题：<base>元素未生效

一、标签失效的核心原因及对应解决 #

1. Stencil构建配置未适配仓库路径
   Stencil默认会将资源编译为根路径，仅靠<base>标签无法覆盖框架的路径处理逻辑。需在stencil.config.ts的outputTargets中明确配置仓库路径：

export const config: Config = {
  outputTargets: [
    {
      type: 'www',
      baseUrl: '/你的仓库名/',
      publicPath: '/你的仓库名/',
      // 保留其他原有配置
    }
  ]
};

重新构建后，组件内的资源路径会自动基于仓库名生成，配合<base>标签就能正确解析。

2. 标签位置错误
   <base>必须放在<head>最顶部，所有引用相对路径的资源（脚本、样式、图片）之前。如果放在后面，已加载的资源不会受其影响，组件后续加载的资源也可能失效。正确写法：

<head>
  <base href="/你的仓库名/">
  <!-- 再放meta、link、script等标签 -->
</head>

3. 组件内路径写法不符合规则
   如果资源路径开头带斜杠（比如<img src="/relative/path/to/img">），属于绝对路径，会直接忽略<base>标签。必须去掉开头斜杠，写成<img src="relative/path/to/img">，才会基于<base>的href解析路径。

4. 仓库名大小写不匹配
   GitHub Pages对路径大小写敏感，<base>里的仓库名必须和实际仓库名完全一致（比如仓库是Stencil-UI，就不能写成/stencil-ui/），否则路径匹配失败，<base>无法生效。

二、验证步骤 #

• 构建后检查www目录下的HTML文件，确认<base>位置正确，资源路径均为不带开头斜杠的相对路径。
• 部署后打开浏览器控制台，查看网络请求中图片等资源的完整路径，确认是https://你的用户名.github.io/仓库名/relative/path/to/img格式。

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