Angular项目运行lite-server时报404 GET /index.html错误是什么原因？

• lite-server默认以执行命令的当前工作目录（Angular项目根目录）作为静态文件服务根目录，而Angular项目根目录下不存在index.html入口文件：未编译的开发入口文件默认存放在src/目录下，ng build生成的生产构建产物默认存放在dist/目录下，因此服务端找不到请求的资源返回404。
• 当前配置的dev脚本没有为lite-server指定正确的服务目录，也未添加适配Angular单页应用的路由回退配置。

分两种使用场景选择对应配置即可：

场景1：调试未编译的本地开发源码（src目录内容） #

1. 在项目根目录新建lite-server默认加载的配置文件bs-config.json，写入如下内容：

{
  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"
    }
  },
  "fallback": "src/index.html"
}

配置说明：

• baseDir指定静态文件服务的根目录为src
• routes配置将/node_modules路径的请求映射到项目根目录的node_modules文件夹，保证第三方依赖正常加载
• fallback配置适配Angular单页应用路由，避免手动刷新页面出现404

2. 调整package.json中的dev脚本，显式指定配置文件（可选，lite-server默认会自动读取根目录的bs-config.json）：

"dev": "lite-server -c bs-config.json"

场景2：调试ng build编译后的生产构建产物 #

1. 先执行构建命令生成打包产物：
   npm run build
   Angular 12及以上版本默认将产物生成在dist/[你的项目名称]/目录下，旧版本可能直接生成在dist/根目录，你可以自行确认实际产物路径。

2. 修改bs-config.json配置指向构建产物目录，示例如下（将路径替换为你实际的产物路径）：

{
  "server": {
    "baseDir": "dist/your-project-name"
  },
  "fallback": "dist/your-project-name/index.html"
}

配置完成后执行npm run dev启动lite-server，访问http://localhost:3000即可正常加载页面，不会再出现index.html相关的404报错。

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