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/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
SVG实现时钟效果
Jul 17 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
解决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远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
PHP多进程简单实例小结
2019/11/09 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
JS判断两个时间大小的示例代码
2014/01/28 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
layui文件上传实现代码
2017/05/20 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
python自定义解析简单xml格式文件的方法
2015/05/11 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
python实现淘宝购物系统
2019/10/25 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
建龙钢铁面试总结
2014/04/15 面试题
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
英语生日邀请函
2014/01/23 职场文书
文明班级建设方案
2014/05/15 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
项目安全员岗位职责
2015/02/15 职场文书
单位工作证明范本
2015/06/15 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP