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 相关文章推荐
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
JavaScript prototype属性使用说明
May 13 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
Angular的MVC和作用域
Dec 26 Javascript
webpack多页面开发实践
Dec 18 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 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 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python之re操作方法(详解)
2017/06/14 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
基于python调用psutil模块过程解析
2019/12/20 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
工商管理本科毕业生求职信范文
2013/10/05 职场文书
高中考试作弊检讨书
2014/01/14 职场文书
物流专员岗位职责
2014/02/17 职场文书
2014年终工作总结范本
2014/12/15 职场文书
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers