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-Jquery简介 入门了解篇
Nov 25 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
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
德生PL990的分析评价
2021/03/02 无线电
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
用PHP生成html分页列表的代码
2007/03/18 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
用正则获取指定路径文件的名称
2007/02/27 Javascript
js右键菜单效果代码
2007/07/21 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题
时尚女魔头观后感
2015/06/04 职场文书
公司会议开幕词
2016/03/03 职场文书