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 相关文章推荐
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 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多态的实现详解
2013/06/09 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
Python中安装easy_install的方法
2018/11/18 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
读书活动总结
2014/04/28 职场文书
禁止酒驾标语
2014/06/25 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
导游词300字
2015/02/13 职场文书
求职自我推荐信
2015/03/24 职场文书
欢送领导祝酒词
2015/08/12 职场文书
安全责任协议书范本
2016/03/23 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
spring boot实现文件上传
2022/08/14 Java/Android