WebPack系列：Webpack編譯的代碼如何在tomcat中使用時靜態資源路徑不對的問題如何解決

時間 2019-11-17

標籤 webpack 系列編譯代碼如何 tomcat 使用靜態資源路徑不對問題解決欄目 Tomcat 简体版

原文原文鏈接

問題：javascript

使用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>