我想将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中启动→按预期工作
webpack-dev-server --inline --progress --port 3000
当我分别运行 npm build时,rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail它会正确构建应用程序,并且输出包文件将按预期方式物理放置在dist文件夹中。
rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail
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 /”丢失。
我真的被困在这里,我感到我已经尝试了有关该主题的所有内容。
有人可以告诉我我在做什么错吗?先感谢您。
问题与标签有关<base href="/" />。当使用类似tomcat的网络服务器或尝试使用从文件系统直接加载应用程序时,这是错误的firefox index.html。必须将其更改为<base href="./" />。当应用程序仍然有问题时,请检查如何导入脚本文件。我试图将angular2-webpack与tomcat 一起使用,并且还需要更改所有脚本标签以在src属性中不使用前导斜线。
<base href="/" />
firefox index.html
<base href="./" />
<script src="js/vendor.js" ></script>
使用webpack时,行为由属性控制output.publicPath。在angular2文档和angular2-webpack中,将其设置为
output.publicPath
output.publicPath="/"
这导致链接中的绝对路径。删除后,webpack将使用相对路径,并且脚本和图像的链接有效。