如何正确运行 Angular 构建后的 index.html 文件

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 服务器准备的“部署产物”，不是“可执行文件”。理解这一设计原则，是掌握前端工程化部署的关键第一步。