使用 Webpack 将 Angular 2 应用程序部署到 Tomcat - 404 错误

我想构建 Angular 2 前端并将其部署到 Tomcat 应用程序服务器。为了开始使用，我完全按照以下介绍的步骤进行：https://angular.io/docs/ts/latest/guide/webpack.html https://angular.io/docs/ts/latest/guide/webpack.html.

所以我有以下项目结构（所有文件与上面提到的介绍完全相同）：

angular2-webpack
---配置
--------helpers.js
------karma.conf.js
-------karma-test-shim.js
--------webpack.common.js
--------webpack.dev.js
--------webpack.prod.js
--------webpack.test.js
---dist
---节点模块
- -民众
--------CSS
--------------styles.css
- - - -图片
--------------角.png
---src
- - - -应用程序
--------------app.component.css
--------------app.component.html
--------------app.component.spec.ts
--------------app.component.ts
--------------app.module.ts
-------index.html
--------main.ts
--------polyfills.ts
--------供应商.ts
---打字
---karma.conf.js
---package.json
---tsconfig.json
---typings.json
---webpack.config.js

npm 启动分别webpack-dev-server --inline --progress --port 3000在控制台或 Webstorm 中→按预期工作

当我跑步时npm 构建分别rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail它构建的应用程序没有错误，并且输出捆绑文件按预期实际放置在 dist 文件夹中。

dist
- -资产
--------角.png
---应用程序.css
---app.css.map
---app.js
---app.js.map
---index.html
---polyfills.js
---polyfills.js.map
---供应商.js
---vendor.js.map

接下来我将dist文件夹的内容复制到Tomcat 9.0的webapps目录中。当我尝试访问已安装的应用程序时，我收到 .css 和 .js 文件的 404 错误（可以在附图中看到 https://i.stack.imgur.com/twslK.png）。 它尝试从错误的 URL 获取文件 →“/obv/”丢失。

我真的被困在这里，我感觉我已经尝试了在互联网上可以找到的有关此主题的所有内容。

有人可以告诉我我做错了什么吗？先感谢您。

问题与标签有关<base href="/" />。当使用像 tomcat 这样的网络服务器或尝试直接从文件系统加载应用程序时，这是错误的firefox index.html。这必须更改为<base href="./" />。当应用程序仍然有问题时，请检查脚本文件的导入方式。我尝试使用angular2-webpack https://github.com/preboot/angular2-webpack与 tomcat 一起使用，还需要更改所有脚本标记，以便不在 src 属性中使用前导斜杠。

<script src="js/vendor.js" ></script>

使用 webpack 时，行为由属性控制output.publicPath。在里面Angular2 文档 https://angular.io/docs/ts/latest/guide/webpack.html并在angular2-webpack https://github.com/preboot/angular2-webpack这被设置为

output.publicPath="/"

这导致链接中的绝对路径。删除后，webpack 将使用相对路径，并且脚本和图像的链接可以工作。