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 相关文章推荐
css值转换成数值请抛弃parseInt
Oct 24 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
js实现复制粘贴的两种方法
Dec 04 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 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将任何格式视频转为flv的代码
2009/09/03 PHP
php验证码生成代码
2015/11/11 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
python写xml文件的操作实例
2014/10/05 Python
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python实现DDos攻击实例详解
2019/02/02 Python
Python多进程fork()函数详解
2019/02/22 Python
Python实现打印实心和空心菱形
2019/11/23 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
自考生自我评价分享
2014/01/18 职场文书
投标保密承诺书
2014/05/19 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
检讨书之工作不认真
2019/08/14 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python