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 相关文章推荐
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
Vue中props的详解
May 16 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
一个MYSQL操作类
2006/11/16 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
JavaScript OOP面向对象介绍
2010/12/02 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
javascript前端实现多视频上传
2020/12/13 Javascript
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
高中毕业自我鉴定
2013/12/13 职场文书
高校教师思想汇报
2014/01/11 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
庆六一开幕词
2015/01/29 职场文书
婚姻出轨保证书
2015/05/08 职场文书
大学开学感言
2015/08/01 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
python urllib库的使用详解
2021/04/13 Python
MySQL慢查询优化解决问题
2022/03/17 MySQL