Angular应用部署Tomcat非根路径资源加载失败解决方案咨询

方法一：打包时指定基础路径 #

直接在打包命令中添加--base-href参数，指定部署的子路径：

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

执行该命令后，生成的index.html会自动插入<base href="/webc/">标签，所有相对路径的资源都会以这个路径为基准加载，浏览器会正确请求http://localhost:8080/webc/polyfills-S3BTP7ME.js这类资源。

方法二：手动修改已打包的index.html #

如果已经完成打包，可直接修改生成的index.html文件，在<head>标签内添加基础路径标签：

<base href="/webc/">

添加后，所有相对路径的资源引用都会基于这个路径拼接，确保请求地址正确。

方法三：通过配置文件默认设置基础路径 #

修改项目根目录的angular.json文件，找到projects -> 你的项目名称 -> architect -> build -> options节点，添加baseHref配置：

"options": {
  "baseHref": "/webc/",
  // 其他原有配置项...
}

之后执行ng build --prod时，会自动应用这个基础路径，无需每次在命令行传参。

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