Angular构建后dist目录无index.html，无法部署至Nginx问题

1. 修正构建命令 #

你用了错误的构建命令：npm build是npm的默认命令，除非你在package.json里自定义了对应脚本，否则它不会触发Angular的构建流程，这就是dist目录没有index.html的核心原因。

正确的构建方式有两种：

• 直接执行Angular CLI命令：

  ng build
  

• 若想用npm脚本，先确认package.json的scripts字段包含Angular构建配置（默认新项目会自带）：

  "scripts": {
    "build": "ng build",
    // ...其他脚本
  }
  

  此时执行npm run build即可触发构建。

2. 定位正确的部署产物目录 #

执行正确的构建命令后，项目根目录下会生成dist/文件夹，里面会有一个和项目名同名的子目录（比如你的项目是umm-client-app，对应dist/umm-client-app/）——这个子目录里才包含完整的部署文件，包括index.html、编译后的js、css等资源。

如果想简化输出路径，可以：

• 构建时添加参数：ng build --output-path dist
• 或者修改angular.json里的projects.umm-client-app.architect.build.options.outputPath配置，将其设为dist，后续构建产物会直接放在根dist目录下。

3. 解决Nginx 403错误 #

把dist目录直接复制到/usr/share/nginx/html出现403，通常是两个原因：

• 复制路径错误：你复制的是外层dist/目录，而非里面的项目子目录，导致Nginx找不到index.html。正确操作是把dist/umm-client-app/下的所有文件复制到/usr/share/nginx/html目录。
• 文件权限问题：Nginx运行用户（通常是nginx或www-data）没有读取文件的权限，执行以下命令修复：

  sudo chown -R nginx:nginx /usr/share/nginx/html
  sudo chmod -R 755 /usr/share/nginx/html
  

额外提示：生产环境构建优化 #

如果是部署到生产环境，建议使用生产构建命令开启代码压缩、树摇等优化：

# Angular 11及以下版本
ng build --prod

# Angular 12+版本
ng build --configuration production

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