问题:

    使用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. 跨域iframe的高度自适应

    If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ...

  2. 别再TM跟我说找不到满意的工作!

    上一篇老徐跟大家分享:如何判断自己在这家公司是否有成长? 今天只想跟大家说几个真是案例:别再TM总抱怨说找不到满意的工作 说明:如下案例,针对老徐当前的软件测试职业,其他职业可自己脑补--- / 1 ...

  3. 转载 sql 存储过程与函数区别

    SQL Server用户自定义函数和存储过程有类似的功能,都可以创建捆绑SQL语句,存储在server中供以后使用.这样能够极大地提高工作效率,通过以下的各种做法可以减少编程所需的时间: 重复使用编程 ...

  4. hibernate和mybatis的区别

    本文出自 alicejiyayun原创 第一章     Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架,它出身于sf.NET,现在已经成为Jboss的 ...

  5. Linux 内核日志——dmesg

    有时Linux系统或者系统上运行的mysqld或者其它进程,会发生一些莫名其妙的问题,比如突然挂掉了,比如突然重启等等.在软件上找不到问题所在,此时我们应该怀疑硬件或者内核的问题,此时我们就可以使用 ...

  6. org.apache.jasper.JasperException: Unable to compile class for JSP

    项目启动时报错 : The method getJspApplicationContext(ServletContext) is undefined for the type JspFactory S ...

  7. Linux系统管理命令之用户组管理

    涉及的配置文件 /etc/group /etc/gshadow /etc/gshadow- 可用于还原 不同系统的备份文件名称不同:name-或name.old 命令: 添加用户组groupadd 组 ...

  8. vim linux SecureCRT vim颜色的设置

    解决方法: 1.首先按照环境一的方法检查一下,如果环境一的情况不在进行第二步. 2.修改终端TERM这个环境变量: 1)export命令 临时生效 # echo $TERM xterm   #如果结果 ...

  9. Ganglia安装扩容

    现有的环境中Hbase集群的机器需要安装ganglia,遂采取了以下步骤. 查看机器的信息, uname –a cat /etc/issue 查看当前环境是x86的,安装的是red hat 6.4 之 ...

  10. MySQL Database on Azure 的用户名

    MySQL Database on Azure是中国版Windows Azure上的一个PaaS服务,类似于AWS上的RDS.MySQL Database on Azure的用户名与on-premis ...