码云笔记前端博客
Home > 前端技术 > Vue项目如何使用webpack打包部署到Tomcat

Vue项目如何使用webpack打包部署到Tomcat

2019-08-29 分类:前端技术 作者:码云 阅读(270)

本文共计1515个字,阅读时间预计4分钟,干货满满,记得点赞加收藏哦

对于新建的vue项目如何使用webpack打包部署到Tomcat上,对于第一次接触的同学或许有些困难,感到无从下手,不过没关系,网上有很多教程提供大家参考,所以今天我就讲件我最近对vue项目打包部署的步骤,以及在打包的过程当中遇到的问题和注意事项记录下来供大家学习交流,俗话说:“好记性不如一个烂笔头”,更何况我们是做技术的,想要提高我们的技术就要不断在实践中总结和提升。

新建Vue项目webpack打包,部署到Linux服务器Tomcat上。

1,在Linux服务器下的Tomcat的webapps下创建VueTest文件夹
Vue项目如何使用webpack打包部署到Tomcat
2,配置router/index.js文件,增加base: '/VueTest',VueTest就是Tomcat中webapps下文件路径

我在将应用发布到服务器上,发现当刷新当前路由的时候,就会出现404的状况,其实这是因为当刷新当前页面时候,所需要访问的资源在服务器上找不到,也就是说,我们在Vue发应用的过程中,设置路由的路径不是真实存在的路径,并且使用了history模式。解决方案是在router/index.js下加一个base路径,因为在部署的时候有一个文件夹,这个文件夹相当于一个基目录,路由没有这一层的话会报错

1
2
3
4
5
export default new Router({
  mode: 'history',
  base:'/VueTest/',
  routes: constantRourerMap
})

3,在项目运行“cnpm run build”命令,生成dist文件夹,dist文件夹中包含static和index.html
Vue项目如何使用webpack打包部署到Tomcat
4,将dist文件夹中static和index.html复制到Tomcat中webapps的VueTest文件夹中
Vue项目如何使用webpack打包部署到Tomcat
5,重启Tomcat,访问Linux服务器ip:8080/VueTest,即可访问到Vue项目

注意事项:

(1)在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath参数,将它从“/”变为了“./”
Vue项目如何使用webpack打包部署到Tomcat
(2)找到 build->utils.js,在里面加入一句publicPath:“../../”
Vue项目如何使用webpack打包部署到Tomcat
配置这两个是因为我看到我的数据结构跟一般的不一样,下边是我的数据结构
Vue项目如何使用webpack打包部署到Tomcat
在css引图片的路径是

1
background: url('../../static/img/index.png') no-repeat top left ;

这样就可以访问Vue项目了

但是,页面刷新时出现404问题,这是个什么鬼,经过百度得出解决方案

此时访问页面应该基本的都可以跳转,但是刷新的时候突然发现报了404,这个在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释

根据官方给出的解决方案原理

你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

所以在tomcat服务器下你可以这么做。在打包好的项目根目录下新建一个WEB-INF文件夹,在WEB-INF中写一个web.xml。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee

           http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"


  version="3.1" metadata-complete="true">

  <display-name>Router for Tomcat</display-name>

  <error-page>

    <error-code>404</error-code>

    <location>/index.html</location>

  </error-page>

</web-app>

这样的目的就是一旦出现404就返回到 index.html 页面。

以上就是今天码云笔记前端开发给大家介绍的Vue项目webpack打包部署到Tomcat上的具体操作步骤,希望对大家有所帮助,如果大家有任何疑问请给我留言,我会及时回复大家的。在此也非常感谢大家对码云笔记的支持!

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(10) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
10

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - Vue项目如何使用webpack打包部署到Tomcat

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 472 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1040 个
  • 建站时间: 522 天
  • 访问总量: 8681413 次
  • 最近更新: 2019年11月18日