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 相关文章推荐
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 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 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
Python Http请求json解析库用法解析
2020/11/28 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
路政管理毕业自荐书范文
2014/02/10 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
军训结束新闻稿
2015/07/17 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL