问题：

    使用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. Google Nexus5在linux下刷原生安卓 android6.0

    之前将Nexus5刷成了MIUI系统,现在想体验一下安卓6.0,网上都是windows的教程,但如何在linux下刷机呢? 首先准备环境和工具: 1. 我的linux系统是lubuntu 15.10 ...

  2. junit 使用

    今天用jsoup做了一个‘网络抓取实例’,然而,当作者把junit-4.11.jar 导入项目中,在类中方法上加入@Test,运行时却报错,报错代码如下: java.lang.NoClassDefFo ...

  3. Oracle行内链接不会引起USER_TABLES中CHAIN_CNT值变化

    前几天和群里网友讨论一个关于行内链接(intra-block chaining)的问题,问题非常有意思,恰好今天有空,顺便整理了一下这些知识点. 问题描述:下面SQL,创建一个超过255列的表(实际为 ...

  4. Sqlite学习笔记(一)&&编译安装

    Sqlite简介 sqlite是一个开源的嵌入式文件数据库,sqlite以动态链接库的方式供应用程序调用,所有的数据库对象都存储在同一个文件中. sqlite动态库非常小,最新的3.8.11版本也只有 ...

  5. 【转载】Linux NFS服务器的安装与配置

    一.NFS服务简介 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公司开发,于1984年向外公布.功能是通过网络让不同的机器.不同的操 ...

  6. php 页面传递数组元素

    前台页面的表单中添加多个input元素,如下: <form action="a.php">  <input type="text" name= ...

  7. Win7下硬盘安装Ubuntu 12.04.3双系统

    一. 准备工作 1. 下载ubuntu镜像文件:Ubuntu-12.04.3-desktop-amd64.iso(4G及以上内存建议64位),注意这个amd并不是指amd芯片. 2. 下载硬盘分区工具 ...

  8. POST和GET区别

    1. get是从服务器上获取数据,post是向服务器传送数据.2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过H ...

  9. 自罚一杯-PHP基础（一）

    hi 懒癌是最可怕的癌了吧,在即将迎来本命年时,给自己定下每天必干的几件成习惯的事情,望不再鸽!! php是我一直在学习的东西,但总以为php简单,难点在需要掌握大量的相关知识,其实并不完全对,php ...

  10. ImageMagick Remote Command Execute

    CVE ID: CVE-2016-3714 我挺纠结应该用中文写博客还是应该用英文写博客.英文吧作用挺明显的,可以锻炼自己的英语表达能力,但是可能会阻碍和一些英文不好的朋友交流. It's upset ...