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 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 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判断变量类型常用方法
2012/04/24 PHP
解析argc argv在php中的应用
2013/06/24 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
Python读写ini文件的方法
2015/05/28 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
Python 加密与解密小结
2018/12/06 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
python中JWT用户认证的实现
2020/05/18 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
Python __slots__的使用方法
2020/11/15 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
上海期货面试题
2014/01/31 面试题
户外活动总结范文
2014/04/30 职场文书
岗位职责范本大全
2015/02/26 职场文书
2015年母亲节寄语
2015/03/23 职场文书
门球健将观后感
2015/06/16 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
virtualenv隔离Python环境的问题解析
2022/06/21 Python