如何让Angular在服务器环境下自动为图片路径添加/server前缀？

直接利用Angular CLI的base href配置即可实现，无需手动修改文件：

• 构建时临时指定前缀
  执行构建命令时添加--base-href参数，所有资源路径会自动带上指定前缀：

  ng build --prod --base-href "/server/"
  

  构建完成后，CSS中的url(/assets/banner.png)会自动转换为url(/server/assets/banner.png)，同时index.html会自动生成<base href="/server/">标签，统一管理所有资源的基准路径。

• 配置文件中默认设置前缀
  若不想每次构建都输入参数，可修改angular.json配置文件，在项目的构建选项中添加默认base href：

  {
    "projects": {
      "你的项目名称": {
        "architect": {
          "build": {
            "options": {
              "baseHref": "/server/",
              // 其他原有配置...
            }
          }
        }
      }
    }
  }
  

  之后执行ng build --prod就会自动应用该前缀。

这种方式是Angular官方推荐的资源路径管理方案，比手动执行sed命令更稳定、易维护，能统一处理所有类型的资源路径（包括模板图片、CSS背景图、脚本文件等）。

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