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实现原理介绍)
Nov 08 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
vue视图不更新情况详解
May 16 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
js制作提示框插件
Dec 24 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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
python实现可逆简单的加密算法
2019/03/22 Python
Python GUI编程完整示例
2019/04/04 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
pandas.cut具体使用总结
2019/06/24 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
主题酒店策划书
2014/01/28 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
导游个人求职信
2014/04/25 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
初中班主任工作随笔
2015/08/15 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js