Angular CLI项目部署到GitHub Pages后显示空白页的问题求助

先理清你疑惑的dist文件夹 #

• ng serve是开发用的本地服务器命令，它直接在内存里跑项目，不会生成本地物理文件，所以你看不到dist文件夹很正常。
• 要生成能部署到服务器的文件，得用ng build命令。Angular 15里执行ng build --configuration production后，会在项目根目录下生成dist/[你的项目名]文件夹——这里面是编译压缩后的静态资源（JS、CSS、HTML这些），才是要上传到GitHub Pages的东西。

一步步解决资源加载和空白问题 #

1. 先正确构建项目
   执行这个生产构建命令，记得把你的GitHub项目仓库名换成你实际的仓库名：

   ng build --configuration production --base-href "/你的GitHub项目仓库名/"
   

   举个例子：如果你的GitHub Pages访问地址是https://xxx.github.io/my-angular-firebase-app/，那--base-href就填"/my-angular-firebase-app/"；如果是部署到你的用户名根仓库（比如https://xxx.github.io/），就填"/"。

2. 部署到GitHub Pages的两种方式

   • 手动上传：进入dist/[你的项目名]文件夹，把里面所有文件上传到GitHub仓库的gh-pages分支（没有的话手动创建这个分支）。
   • 工具自动部署（更省事）：先装Angular的GitHub Pages工具：

     npm install -g angular-cli-ghpages
     

     构建完成后直接跑这个命令部署，同样替换仓库名：

     ng deploy --base-href "/你的GitHub项目仓库名/"
     

     它会自动把dist里的文件推到gh-pages分支，不用手动操作。

3. 排查资源加载问题
   部署后如果还是空白，打开浏览器的开发者工具（F12）看网络请求：

   • 如果看到main.js、styles.css这些资源返回404，说明路径错了。比如你的仓库名是my-app，资源应该从https://xxx.github.io/my-app/main.js加载，如果请求的是https://xxx.github.io/main.js，那就是base href没设对，重新构建时修正参数就行。

额外提醒 #

• 去GitHub仓库的设置里，确认Pages的部署分支是gh-pages，路径选/root（别选/docs）。
• 你用了Firebase数据库，要确保Firebase控制台里允许GitHub Pages的域名访问——在Authentication的Sign-in method里把你的GitHub Pages域名加进去，不然可能会有跨域或者权限问题导致页面空白。

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