angular 项目通过 `ng build` 生成的 `index.html` 无法直接双击打开，是因为现代前端框架依赖 http 协议加载资源（如 js、css、路由），而本地文件系统（file://）不支持跨域请求、服务端重定向及 history api 路由等关键功能。
当你执行 ng serve 时，Angular CLI 启动了一个基于 Webpack Dev Server 的本地开发服务器（默认 http://localhost:4200），它能正确处理模块导入、路由跳转（尤其是 PathLocationStrategy）、静态资源路径解析以及 CORS 等问题。
但 ng build 输出的 dist/ 目录仅包含静态文件（HTML、JS、CSS、assets），它们必须通过 HTTP 服务器提供服务，而非直接由浏览器以 file:// 协议加载。否则会出现以下典型问题：
- 控制台报错：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain"
- 路由失效（如访问 /dashboard 直接 404 或白屏）
- 图片、字体、API 请求因协议限制被浏览器拦截
✅ 推荐的本地快速验证方式（无需额外安装）：
Angular CLI 自带 ng serve --prod（开发环境模拟生产构建），但若需测试真实 dist/ 内容，可使用 Node.js 内置工具：
# 确保已安装 http-server（轻量级静态服务器） npm install -g http-server # 进入 dist 目录（假设项目名为 my-app） cd dist/my-app # 启动服务器，默认端口 8080 http-server -o
✅ -o 参数自动在浏览器中打开 http://localhost:8080；页面将正常加载、路由可用、控制台无跨域错误。
? 其他可靠方案：
- 使用 VS Code 插件 Live Server（右键 index.html → “Open with Live Server”）
- 使用 Python（Python 3+）：python -m http.server 8000（进入 dist/my-app 后执行）
- 部署到 Nginx/Apache（生产环境标准做法）
⚠️ 重要提醒：
立即学习“前端免费学习笔记（深入）”；
- 不要修改 index.html 中的
—— 它由 angular.json 的 baseHref 配置决定，错误设置会导致资源 404； - 若使用 --base-href ./ 构建（如部署到子目录），需确保所有相对路径一致，并配合服务器配置；
- file:// 方式仅适用于纯静态 HTML/CSS/JS（无模块、无路由、无 fetch/XHR），不适用于任何现代 SPA 框架。
总之，dist/index.html 是为 HTTP 服务器准备的“部署产物”，不是“可执行文件”。理解这一设计原则，是掌握前端工程化部署的关键第一步。
