一尘不染

将带有Webpack的Angular 2 App部署到Tomcat-404错误

tomcat

我想将Angular
2前端构建并部署到Tomcat应用程序服务器。首先,我完全按照以下介绍的步骤进行操作:https
:
//angular.io/docs/ts/latest/guide/webpack.html

因此,我具有以下项目结构(所有文件都与上面的简介提及的内容完全相同):

angular2-webpack
-– config
------- helpers.js
------- karma.conf.js
------- karma-test-shim.js
------- webpack.common.js
------- webpack.dev.js
------- webpack.prod.js
------- webpack.test.js
-– DIST
-– node_modules
- –public
------- css
-------------- styles.css
-------图像
-------------- angular.png
-– src
------- app
-------------- app.component.css
-------------- app。 component.html
-------------- app.component.spec.ts
-------------- app.component.ts
------- ------- app.module.ts
------- index.html
------- main.ts
-------
polyfills.ts ------- vendor.ts
-– typings -–
karma.conf.js
-– package.json
-– tsconfig.json
-– typings.json
-– webpack.config.js

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

当我分别运行 npm build时,rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail它会正确构建应用程序,并且输出包文件将按预期方式物理放置在dist文件夹中。

DIST
-–资产
------- angular.png
-– app.css
-–app.css.map
-– app.js
-–app.js.map
-– index.html的
- –polyfills.js
-–polyfills.js.map
-– vendor.js
-–vendor.js.map

接下来,我将dist文件夹的内容复制到Tomcat
9.0的webapps目录中。当我尝试访问已安装的应用程序时,.css和.js文件出现404错误(可以在所附图片中看到)。它尝试从错误的URL中获取文件→“
/ obv /”丢失。

我真的被困在这里,我感到我已经尝试了有关该主题的所有内容。

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


阅读 278

收藏
2020-06-16

共1个答案

一尘不染

问题与标签有关<base href="/" />。当使用类似tomcat的网络服务器或尝试使用从文件系统直接加载应用程序时,这是错误的firefox index.html。必须将其更改为<base href="./" />。当应用程序仍然有问题时,请检查如何导入脚本文件。我试图将angular2-webpack与tomcat
一起使用,并且还需要更改所有脚本标签以在src属性中不使用前导斜线。

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

使用webpack时,行为由属性控制output.publicPath。在angular2文档angular2-webpack中,将其设置为

output.publicPath="/"

这导致链接中的绝对路径。删除后,webpack将使用相对路径,并且脚本和图像的链接有效。

2020-06-16