Angular部署Github Pages后如何设置默认启动页面无需手动访问index.html

我之前也碰到过一模一样的情况，其实就是几个关键配置没到位，你可以按下面的步骤排查调整：

1. 构建时指定正确的base-href #

Angular应用部署到GitHub Pages的项目子路径（比如nick.github.io/projectName）时，必须在构建阶段指定base href为你的项目名称，否则应用的资源路径会出错，GitHub Pages也找不到正确的入口文件。

执行构建命令时加上--base-href参数：

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

注意路径前后的斜杠不能省略，projectName要替换成你实际的GitHub项目名称。

2. 确认GitHub Pages的发布源设置 #

进入你的GitHub项目页面，点击顶部的Settings，找到左侧菜单的Pages选项：

• 在Source区域，确认选择的是gh-pages分支，并且分支的目录是/root（根目录）
• 如果之前选的是主分支（比如main/master）的根目录，那GitHub Pages会默认展示项目的README.md等说明文件，而不是Angular的构建产物

3. 确保gh-pages分支的index.html在根目录 #

去GitHub上查看你的gh-pages分支内容，确认index.html是直接放在根目录下，而不是在dist或者其他子文件夹里。

如果用angular-cli-ghpages工具部署，要确保指定正确的构建产物目录：

ng deploy --base-href "/projectName/" --dir=dist/projectName

这里的dist/projectName是Angular构建后生成文件的目录，根据你的项目实际名称调整，工具会自动把该目录下的所有文件推到gh-pages分支的根目录。

4. 清理缓存重新部署 #

有时候缓存会导致页面不更新，你可以删除旧的gh-pages分支后重新部署：

# 删除本地gh-pages分支
git branch -D gh-pages
# 重新构建
ng build --prod --base-href "/projectName/"
# 重新部署到gh-pages分支
npx angular-cli-ghpages --dir=dist/projectName

做完这些步骤后，等个几分钟让GitHub Pages更新缓存，再访问nick.github.io/projectName应该就能直接看到你的Angular应用了。

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