vue-cli history模式实现tomcat部署报404的解决方式


Posted in Javascript onSeptember 06, 2019

vue-cli开发过程中路由#不好看,去掉可使用history模式,开发模式路径访问都没问题,部署到服务器之后访问路径时报404,这种情况需要配置服务器默认访问路径index.html.官网只提供了apache、nginx的配置方式,没有tomcat的配置方式,下面以个例子来完成整个配置。

范例:vue-cli项目使用路由,tomcat作为服务器,项目文件夹名myvue

1.npm run build 打包生成的build文件夹中内容拷贝到myvue文件夹如下图:

vue-cli history模式实现tomcat部署报404的解决方式

2.myvue文件夹下新建WEB-INF/web.xml 其中添加404错误跳转路径如下图:

vue-cli history模式实现tomcat部署报404的解决方式

3.vue-cli项目config/index.js 配置assetsPublicPath:'/myvue/' 项目包名称

vue-cli history模式实现tomcat部署报404的解决方式

4.vue-cli项目src/router/index.js 配置mode:'history',base:'/myvue/'

vue-cli history模式实现tomcat部署报404的解决方式

以上vue-cli配置与tomcat部署都ok后,启动tomcat服务器,访问路径项目名myvue,ok可以正确访问了,

vue-cli history模式实现tomcat部署报404的解决方式

如果不设置服务器的index.html,也可以直接在vue-cli项目src/router/index.js 里 path:'/myvue/order-search'  直接配置上包名也可以解决问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
js实现五星评价功能
Mar 08 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 #Javascript
layui 弹出删除确认界面的实例
Sep 06 #Javascript
vue-cli3跨域配置的简单方法
Sep 06 #Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 #Javascript
对layui中的onevent 和event的使用详解
Sep 06 #Javascript
在layui下对元素进行事件绑定的实例
Sep 06 #Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 #Javascript
You might like
php array_intersect()函数使用代码
2009/01/14 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
Python中join和split用法实例
2015/04/14 Python
基于Python的关键字监控及告警
2017/07/06 Python
Python3.6简单反射操作示例
2018/06/14 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
学python安装的软件总结
2019/10/12 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
Python排序函数的使用方法详解
2020/12/11 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
.net软件工程师应聘上机试题
2015/03/10 面试题
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
决心书范文
2014/03/11 职场文书
工地标语大全
2014/06/18 职场文书
教师个人读书活动总结
2014/07/08 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
单位实习鉴定评语
2015/01/04 职场文书
2016高考感言
2015/08/01 职场文书
公司人力资源管理制度
2015/08/05 职场文书
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python