Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案


Posted in Javascript onMay 15, 2018

遇到的问题

使用webpack打包vue后,将打包好的文件,发布到Tomcat上,访问成功,但是刷新后页面报404错。

在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释,你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html

但是看完问题又来了,官方给出的解决方案中没有说tomcat下,怎么决解。

解决方案

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

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

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

web.xml中写:

<?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 页面。

最后还需要配置一下你的route,配置一个覆盖所有的路由情况,然后在给出一个 404 页面。

const router = new VueRouter({
 mode: 'history',
 routes: [
  { 
    path: '*', 
    component: (resolve) => require(['./views/error404.vue'], resolve) 
  }
 ]
})

总结

以上所述是小编给大家介绍的Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
解决linux下node.js全局模块找不到的问题
May 15 #Javascript
vue :src 文件路径错误问题的解决方法
May 15 #Javascript
利用npm 安装删除模块的方法
May 15 #Javascript
vux uploader 图片上传组件的安装使用方法
May 15 #Javascript
使用webpack搭建react开发环境的方法
May 15 #Javascript
浅谈Node.js 沙箱环境
May 15 #Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 #Javascript
You might like
php获取文件名称和扩展名的方法
2017/02/07 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
django允许外部访问的实例讲解
2018/05/14 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
python多线程并发实例及其优化
2019/06/27 Python
Django中modelform组件实例用法总结
2020/02/10 Python
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
客房主管岗位职责
2013/12/09 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
蜗居观后感
2015/06/11 职场文书
优秀志愿者感言
2015/08/01 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
党组织结对共建协议书
2016/03/23 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技