如何在angular.json中为所有静态资源自动添加admin访问前缀

你当前遇到的问题是绝对路径的资源请求会忽略baseHref配置，这是浏览器的原生行为：当你写src="/assets/..."时，浏览器会直接从站点根目录发起请求，不会拼接你配置的/admin/前缀，所以才会404。

解决方案 #

方案一（推荐）：无需修改angular.json，仅调整资源路径写法 #

将所有模板中静态资源的绝对路径开头的/去掉，改成相对路径即可：

<!-- 原写法 -->
<img src="/assets/images/test.png">
<!-- 修改后写法 -->
<img src="assets/images/test.png">

Angular会自动结合你已配置的baseHref: "/admin/"，将路径自动拼接为/admin/assets/images/test.png，不需要手动添加前缀，也不需要修改任何构建配置。你现有的baseHref和deployUrl配置可以完全保留，不需要改动。

方案二（适配必须保留绝对路径写法的场景）：修改angular.json资源输出配置 #

如果不想调整模板中的路径写法，可以修改assets配置项，将静态资源打包到站点根目录的assets文件夹下，和admin应用目录同级：

"assets": [
  "src/favicon.ico",
  {
    "glob": "**/*",
    "input": "src/assets/",
    "ignore": ["**/*.svg"],
    "output": "/../assets/" // 将原来的"/assets/"修改为该值
  }
],

修改后打包生成的assets目录会位于dist/front/assets，和admin目录同级，此时直接请求/assets/images/test.png即可命中资源，不需要添加admin前缀。该方案的缺点是静态资源和admin应用代码分离，多应用部署时可能出现资源冲突。

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