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

时间:2023-03-08 16:43:39
WebPack系列:Webpack编译的代码如何在tomcat中使用时静态资源路径不对的问题如何解决

问题:

    使用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
  1. <!DOCTYPE html><html><head><metacharset=utf-8><metaname=HandheldFriendlycontent=true><metaname=viewportcontent="width=device-width,initial-scale=1,user-scalable=no">
  2. <metaname=apple-mobile-web-app-capablecontent=yes>
  3. <metaname=apple-mobile-web-app-status-bar-stylecontent=black>
  4. <title>huajie_webapp</title>
  5. <linkhref=/static/css/app.9f4d9411ca2e49d41c43873d1ac872ea.cssrel=stylesheet>
  6. </head>
  7. <body>
  8. <divid=app></div>
  9. <scriptsrc="http://api.map.baidu.com/api?v=2.0&ak=oeK86DZIYjG81FPqxcDFS5GfFZfWuZFw"></script>
  10. <scripttype=text/javascriptsrc=/static/js/manifest.228b9cf01733503725fb.js></script>
  11. <scripttype=text/javascriptsrc=/static/js/vendor.9d3b48e13b4021af14f8.js></script>
  12. <scripttype=text/javascriptsrc=/static/js/app.e2df972540803c0ad815.js></script>
  13. </body>
  14. </html>
而实际上我们需要的是 http://localhost:8080/appserver/static/js/manifest.228b9cf01733503725fb.js
所以现在是要想办法让他最终可以拼凑出这样的路径。
解决方法:
    因为webpack编译的时候默认把所有静态资源放到了static目录下, 那么我们可以考虑通过修改配置文件,让他放在名为appserver目录下,然后拷贝到tomcat项目的时候,直接把appserver里面的内容拷贝到tomcat项目的webapp目录下。
    修改webpack目录下的config/index.js文件的如下内容,根据不同的tomcat项目名修改成不同的名称。
    WebPack系列:Webpack编译的代码如何在tomcat中使用时静态资源路径不对的问题如何解决
——————完——————