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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
JavaScript与函数式编程解释
Apr 27 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
javascript实现在线客服效果
Jul 15 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 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常用字符串比较函数实例汇总
2014/11/24 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Python 发送邮件方法总结
2020/08/10 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
新闻专业毕业生英文求职信
2014/03/19 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
文明工地标语
2014/06/16 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
酒会开场白大全
2015/06/01 职场文书
反腐倡廉观后感
2015/06/08 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
如何解决php-fpm启动不了问题
2021/11/17 PHP
python中validators库的使用方法详解
2022/09/23 Python