问题:

    使用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中使用时静态资源路径不对的问题如何解决的更多相关文章

  1. 全网最贴心webpack系列教程和配套代码

    webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com.每周 1 篇原创技术分享!开源教程(webpack.设计模式).面试刷题(偏前端 ...

  2. 一步一步学Silverlight 2系列(20):如何在Silverlight中与HTML DOM交互(下)

    述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  3. 一步一步学Silverlight 2系列(19):如何在Silverlight中与HTML DOM交互(上)

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  4. vue+webpack静态资源路径引用

    处理静态资产 你可能已经注意到,在项目结构中我们有两个静态资产目录:src/assets和static/.他们之间有什么区别? 要回答这个问题,我们首先需要了解Webpack如何处理静态资产.在*.v ...

  5. 如何在tomcat中如何部署java EE项目

    如何在tomcat中如何部署java EE项目 1.直接把项目复制到Tomcat安装目录的webapps目录中,这是最简单的一种Tomcat项目部署的方法,也是初学者最常用的方法.2.在tomcat安 ...

  6. vue项目之webpack打包静态资源路径不准确

    摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...

  7. 一步一步学Silverlight 2系列(21):如何在Silverlight中调用JavaScript

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  8. Nexus安装及部署(含如何在Tomcat中部署)

    1. Nexus价值 1)方便-节约带宽-快 2)便于统一管理 3)持续集成需要 2.Nexus下载 http://www.sonatype.org/nexus/go 3.Nexus启动 解压后进入\ ...

  9. 关于如何在Tomcat中使用JavaBean

    对于没有使用myeclipse,NetBean等IDE工具的用户,如果在编写JSP时,用到了java文件,就必须配置JAVAbean了,网上也有很多在Tomcat中配置JAVABean的例子,这里我简 ...

随机推荐

  1. 7、软件质量工程师要阅读的书籍 - IT软件人员书籍系列文章

    软件质量工程师在项目组中的作用不是那么明显,但是它是软件质量的重要度量标准人员.有句话说:软件质量是生产出来的,不是开发出来的.通过软件质量审查,能够对软件项目的代码等质量进行衡量,最起码要能够对代码 ...

  2. ORA-00988: missing or invalid password(s)

    创建账号或修改账号密码时有可能会遇到ORA-00988: missing or invalid password(s),那么什么情况下会遇到这种错误呢? 一般是因为密码的设置不符合命名规范: 1:密码 ...

  3. Spring中@Autowired注解、@Resource注解的区别

    Spring不但支持自己定义的@Autowired注解,还支持几个由JSR-250规范定义的注解,它们分别是@Resource.@PostConstruct以及@PreDestroy. @Resour ...

  4. jmeter 性能测试工具的使用(Web性能测试)

    1.下载 http://pan.baidu.com/s/1o7p18Ye 该软件不用安装,直接解压打开即可使用. 2.使用 这里就在win下进行,图形界面较为方便 在目录apache-jmeter-2 ...

  5. ELF Format 笔记(七)—— 符号表

    最是那一低头的温柔,像一朵水莲花不胜凉风的娇羞,道一声珍重,道一声珍重,那一声珍重里有蜜甜的忧愁 —— 徐志摩 ilocker:关注 Android 安全(新手) QQ: 2597294287 符号表 ...

  6. hdu 5057 Argestes and Sequence(分块算法)

    Argestes and Sequence Time Limit: 5000/2500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  7. [麦先生]TP3.2之微信开发那点事[基础篇](微信支付完成)

    两种模式:扫码支付和微信内支付(调用js-sdk) trade_type==native即扫码支付,只需要将code_url转成二维码,使用微信扫码即可: js-sdk微信内支付-调用微信js-sdk ...

  8. Codeforces 549B. Looksery Party[构造]

    B. Looksery Party time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  9. USACO(含training section)水题合集[5/未完待续]

    (1) USACO2.1 Ordered Fractions 枚举 排序即可,注意1/1 #include<iostream> #include<cstdio> #includ ...

  10. Android应用性能测试

    Android应用性能测试 Android用户也许会经常碰到以下的问题: 1)应用后台开着,手机很快没电了——应用耗电大 2)首次/非首次启动应用,进入应用特别慢——应用启动慢 3)应用使用过程中,越 ...