Angular CLI ng serve --base-href参数行为困惑求助

嘿，我来帮你把这个问题拆解清楚，这其实是Angular CLI开发服务器的工作逻辑和base href的作用机制在搞事情～

一、为什么手动修改index.html的<base href="/a/">后，访问localhost:4200/a会白屏？ #

你手动改了index.html里的base href，但Angular CLI的开发服务器默认是把应用资源部署在根路径（/）下的。这就出现了一个核心矛盾：

• 你的base href告诉Angular要从/a/路径加载静态资源（比如JS、CSS文件）
• 但开发服务器实际把这些资源放在了根目录/下

当你访问localhost:4200/a时，浏览器会根据base href去请求localhost:4200/a/main.js这类资源，但服务器根本没有在/a/路径下存放这些文件，自然加载失败，最终导致应用白屏。

二、为什么用ng serve --base-href /a/后，所有localhost:4200开头的路径都能正常显示？ #

这个参数的作用远不止修改index.html里的base href，它还做了两件关键的事：

1. 适配资源路径：告诉开发服务器，把所有静态资源的请求路径都适配/a/这个前缀，确保Angular能正确加载到资源
2. 开启路由 fallback：Angular CLI的开发服务器默认会开启一个 fallback 机制——当访问的路径不存在时，会返回index.html文件，让Angular的前端路由来处理后续逻辑

所以不管你访问localhost:4200、localhost:4200/a还是localhost:4200/aaaaaaa，服务器都会返回index.html，然后Angular会根据自己的路由配置来渲染内容（如果你的路由没有匹配到/aaaaaaa，可能会显示首页或者自定义的404组件，但不会出现白屏）。

额外小提示 #

如果你想在开发环境更贴近生产环境的部署情况（只有localhost:4200/a能访问，根路径返回404），可以搭配--serve-path参数：

ng serve --base-href /a/ --serve-path /a/

这个命令会让开发服务器把应用挂载到/a/路径下，只有访问localhost:4200/a才能正常加载应用，根路径会返回404，更符合生产部署的实际场景。

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