zoukankan      html  css  js  c++  java
  • 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项目名修改成不同的名称。
        
     
    ——————完——————
     
     





  • 相关阅读:
    浅谈python web三大框架
    Mysql异常
    格式化时间转换
    MySql存储日期为long型,判断时间大小
    Linux下部署项目
    excel
    Tomcate的启动问题
    计算时间差
    地图系的转换
    关于获取本机真实IP
  • 原文地址:https://www.cnblogs.com/strinkbug/p/5773197.html
Copyright © 2011-2022 走看看