Angular应用部署到Gitlab Pages时静态资源路径错误404如何解决

Angular默认构建配置的baseHref值为/，即所有静态资源引用默认以站点根路径为基准拼接。你当前的Gitlab Pages属于项目级站点，托管在域名的二级子路径/repository-name/下，资源引用直接从根路径查找时就会定位不到子路径下的产物，返回404错误。

• 方案1：构建命令追加参数（临时适配，无需修改项目配置）
  修改gitlab-ci.yml中的构建命令，追加--base-href参数指定子路径前缀，示例如下：

script:
  - npm install -g @angular/cli@11.0.1
  - npm install
  - ng build --prod --base-href /repository-name/

该参数会自动修改index.html中的<base>标签值，所有静态资源、路由路径都会自动带上/repository-name/前缀，适配子路径部署场景。

• 方案2：修改angular.json固定配置（长期适配固定部署路径）
  打开项目的angular.json文件，定位到projects.【你的项目名】.architect.build.options节点，新增baseHref配置项：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "/repository-name/",
            // 其余原有配置保留
          }
        }
      }
    }
  }
}

配置后无需每次构建追加参数，默认就会使用指定的子路径作为资源引用基准。

• 方案3：仅修改资源引用前缀（不影响路由配置）
  如果你的Angular路由需要保持根路径配置，仅需要修改静态资源的引用路径，可以将--base-href替换为--deploy-url参数：

ng build --prod --deploy-url /repository-name/

该参数仅调整静态资源的引用前缀，不会修改路由的基准路径。

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