Angular v17项目GitHub Pages发布问题：browser目录困扰及解决方案求助

方案一：切换回旧版「browser」构建器 #

直接修改项目配置，替换构建器并调整输出路径：

• 打开angular.json，找到目标项目的architect.build节点
• 将builder字段从@angular-devkit/build-angular:application改为@angular-devkit/build-angular:browser
• 在options中设置outputPath: "docs"，确保构建产物直接生成到docs目录
• 执行构建命令：ng build --configuration production

方案二：适配新「application」构建器的发布方法 #

如果不想切换旧构建器，有三种便捷方式：

方法1：修改GitHub Pages的发布源路径 #

• 进入GitHub仓库的「Settings」→「Pages」页面
• 在「Source」区域选择「Deploy from a branch」，指定分支（如main）后，路径选择/docs/browser，保存设置即可

方法2：调整构建输出路径到docs根目录 #

• 打开angular.json，在目标项目的architect.build.options中，将outputPath设置为"docs"
• 同时确保browser子配置的outputPath为空（或直接移除该子配置），避免生成额外的browser子目录
• 执行ng build --configuration production，产物会直接输出到docs目录

方法3：构建后自动移动文件 #

• 保持原构建配置不变，执行ng build --configuration production生成docs/browser目录
• 在package.json的scripts中添加脚本：
  • Linux/macOS："postbuild": "rm -rf docs/* && cp -r docs/browser/* docs/ && rm -rf docs/browser"
  • Windows："postbuild": "rd /s /q docs\\* && xcopy docs\\browser\\* docs\\ /e /h /y && rd /s /q docs\\browser"
• 执行npm run build，构建完成后会自动将browser内的文件迁移到docs根目录

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