Angular网站发布至GitHub Pages失败求助

1. 修正项目基础路径配置 #

• 打开angular.json，找到architect.build.options，添加或修改baseHref为你的仓库名称：

  "baseHref": "/globalWeatherVisualizer/"
  

• 同步修改src/index.html里的<base>标签：

  <base href="/globalWeatherVisualizer/">
  

2. 重新构建项目并清理缓存 #

• 执行生产环境构建命令（Angular 12+用--configuration production）：

  ng build --prod --base-href "/globalWeatherVisualizer/"
  

• 如果之前用过angular-cli-ghpages扩展，清理分支缓存：

  npx angular-cli-ghpages --clean
  

3. 手动部署验证（绕过扩展） #

如果扩展工具失效，试试手动推送流程：

1. 进入项目构建后的输出目录（一般是dist/[你的项目名称]）
2. 临时初始化git仓库并推送：

   git init
   git add .
   git commit -m "Deploy to GitHub Pages"
   git remote add origin git@github.com:joevalook/globalWeatherVisualizer.git
   git push -f origin HEAD:gh-pages
   

   注意替换HEAD为你当前的主分支名（比如main或master）

4. 检查GitHub仓库Pages设置 #

• 进入仓库的「Settings」→「Pages」页面，确认「Source」选项选择的是gh-pages分支的/root目录
• 部署完成后等待3-5分钟，刷新Pages预览地址查看效果

5. 针对错误截图的额外排查 #

从错误截图来看，核心问题大概率是构建路径不匹配或gh-pages分支内容损坏，可以先检查dist文件夹内的文件是否完整，再确认推送至gh-pages分支的内容是否为最新构建产物。

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