您的位置：首页 > 运维架构 > Tomcat

WebPack系列：Webpack编译的代码如何在tomcat中使用时静态资源路径不对的问题如何解决

2016-08-15 15:43 1651 查看

问题：

使用webpack+vue做前端，使用tomcat提供api，然后npm run build之后需要将编译，生成如下文件：

| index.html
\---appserver
+---css
| app.9f4d9411ca2e49d41c43873d1ac872ea.css
| app.9f4d9411ca2e49d41c43873d1ac872ea.css.map
|
+---img
| normalIcon.d79d340.png
| stationPower.80a1622.png
| stationTodayIncome.a3ee078.png
|
\---js
app.9d46b4ad872262b9a52e.js
app.9d46b4ad872262b9a52e.js.map
manifest.0c2bbe5e1f55a200d7ab.js
manifest.0c2bbe5e1f55a200d7ab.js.map
vendor.9d3b48e13b4021af14f8.js
vendor.9d3b48e13b4021af14f8.js.map

然后把这些内容拷贝到tomcat项目的webapp目录下运行，无法正常运行，总是提示找不到资源。tomcat项目的名字叫做appserver，访问路径为：http://localhost:8080/appserver/index.html

分析：
因为webpack编译出来的文件都使用index.html文件如下，如果转换为绝对路径，就是： http://localhost:8080/static/js/manifest.228b9cf01733503725fb.js

<!DOCTYPE html><html><head><metacharset=utf-8><metaname=HandheldFriendlycontent=true><metaname=viewportcontent="width=device-width,initial-scale=1,user-scalable=no">

<metaname=apple-mobile-web-app-capablecontent=yes>

<metaname=apple-mobile-web-app-status-bar-stylecontent=black>

<title>huajie_webapp</title>

<linkhref=/static/css/app.9f4d9411ca2e49d41c43873d1ac872ea.cssrel=stylesheet>

</head>

<body>

<divid=app></div>

<scriptsrc="http://api.map.baidu.com/api?v=2.0&ak=oeK86DZIYjG81FPqxcDFS5GfFZfWuZFw"></script>

<scripttype=text/javascriptsrc=/static/js/manifest.228b9cf01733503725fb.js></script>

<scripttype=text/javascriptsrc=/static/js/vendor.9d3b48e13b4021af14f8.js></script>

<scripttype=text/javascriptsrc=/static/js/app.e2df972540803c0ad815.js></script>

</body>

</html>

而实际上我们需要的是 http://localhost:8080/appserver/static/js/manifest.228b9cf01733503725fb.js 所以现在是要想办法让他最终可以拼凑出这样的路径。

解决方法：
因为webpack编译的时候默认把所有静态资源放到了static目录下，那么我们可以考虑通过修改配置文件，让他放在名为appserver目录下，然后拷贝到tomcat项目的时候，直接把appserver里面的内容拷贝到tomcat项目的webapp目录下。
修改webpack目录下的config/index.js文件的如下内容，根据不同的tomcat项目名修改成不同的名称。

——————完——————

来自为知笔记(Wiz)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航