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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
May 14 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 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文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
解密效果
2006/06/23 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
Python读取键盘输入的2种方法
2015/06/16 Python
浅谈python中set使用
2016/06/30 Python
详细分析python3的reduce函数
2017/12/05 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
Python request操作步骤及代码实例
2020/04/13 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
教师实习自我鉴定
2013/12/11 职场文书
写求职信有什么意义
2014/02/17 职场文书
六年级学生评语
2014/04/22 职场文书
初三开学计划书
2014/04/27 职场文书
医院义诊活动总结
2014/07/04 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
门面房租房协议书
2014/12/01 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏