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的一种模块模式
Sep 08 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
基于jquery编写分页插件
Mar 07 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
简述JS控制台的使用
Jul 15 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 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
yii框架中的Url生产问题小结
2012/01/16 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
php生成图片缩略图的方法
2015/04/07 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
一个网马的tips实现分析
2010/11/28 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
Python复制目录结构脚本代码分享
2015/03/06 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
使用Python设计一个代码统计工具
2018/04/04 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
Python接口测试get请求过程详解
2020/02/28 Python
Python过滤序列元素的方法
2020/07/31 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
SQL中where和having的区别
2012/06/17 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
计算机应用专业推荐信
2013/11/13 职场文书
后备干部培训方案
2014/05/22 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
图神经网络GNN算法
2022/05/11 Python