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 相关文章推荐
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
javascript实现Table排序的方法
May 15 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
vue组件之间数据传递的方法实例分析
Feb 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
apache和PHP如何整合在一起
2015/10/12 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
javascript闭包入门示例
2014/04/30 Javascript
javascript时间函数大全
2014/06/30 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
python读写文件操作示例程序
2013/12/02 Python
Python中optparse模块使用浅析
2015/01/01 Python
Django框架模板的使用方法示例
2019/05/25 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
环保建议书200字
2014/05/14 职场文书
中队活动总结
2014/08/27 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
实验心得体会范文
2016/01/25 职场文书
导游词之日月潭
2019/11/05 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android