Angular 15实现构建文件从子目录提供，index.html保留多路径访问

核心需求拆解 #

要实现两个目标：

• 所有静态资源（JS、CSS、字体等）从/app/路径加载（如http://example.com/app/main.js）
• index.html可部署在服务器任意非/app/**的位置（如根目录http://example.com/），且应用路由正常工作

可行配置方案 #

方案1：使用兼容的deployUrl（Angular 15可用）

在项目根目录的angular.json中，修改architect.build.options配置：

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "/",
            "deployUrl": "/app/",
            // 其他现有配置...
          }
        }
      }
    }
  }
}

• baseHref: "/"：指定应用路由的基准路径为根目录，确保路由导航不受资源路径影响
• deployUrl: "/app/"：强制所有静态资源的加载路径指向/app/，构建后index.html中的资源引用会自动变为/app/main.js这类格式

方案2：使用官方推荐的resourcesOutputPath替代（无弃用警告）

同样修改angular.json的architect.build.options：

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "/",
            "resourcesOutputPath": "app",
            // 其他现有配置...
          }
        }
      }
    }
  }
}

• resourcesOutputPath: "app"：构建时会将所有静态资源打包到dist/app子目录下
• 部署时：将dist/app文件夹的内容上传到服务器的/app/目录，将dist/index.html上传到你需要的目标位置（如服务器根目录）

关键注意事项 #

• 不要同时配置baseHref和APP_BASE_HREF，两者冲突会导致路由跳转异常（如你遇到的重定向问题）
• 确保服务器的/app/目录可公开访问，否则资源会加载失败
• 两种方案都无需修改服务器配置，仅通过Angular构建配置即可实现需求

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