問題:
使用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項目名修改成不同的名稱。

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