vue-cli history模式实现tomcat部署报404的解决方式
2019-10-11 18:07
2596 查看
vue-cli开发过程中路由#不好看,去掉可使用history模式,开发模式路径访问都没问题,部署到服务器之后访问路径时报404,这种情况需要配置服务器默认访问路径index.html.官网只提供了apache、nginx的配置方式,没有tomcat的配置方式,下面以个例子来完成整个配置。
范例:vue-cli项目使用路由,tomcat作为服务器,项目文件夹名myvue
1.npm run build 打包生成的build文件夹中内容拷贝到myvue文件夹如下图:
2.myvue文件夹下新建WEB-INF/web.xml 其中添加404错误跳转路径如下图:
3.vue-cli项目config/index.js 配置assetsPublicPath:'/myvue/' 项目包名称
4.vue-cli项目src/router/index.js 配置mode:'history',base:'/myvue/'
以上vue-cli配置与tomcat部署都ok后,启动tomcat服务器,访问路径项目名myvue,ok可以正确访问了,
如果不设置服务器的index.html,也可以直接在vue-cli项目src/router/index.js 里 path:'/myvue/order-search' 直接配置上包名也可以解决问题
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- Vue路由history模式踩坑记录:nginx配置解决404问题
- vue项目打包部署到tomcat空白页的解决方式
- Vue项目History模式404问题解决
- Vue项目History模式404问题解决
- Vue项目History模式404问题解决方法
- Tomcat 热部署实现方式源码分析总结
- tomcat的404报错页面指定即跳转方式的实现
- eclipse下tomcat7.0自测出现“404”异常和部署项目报404的解决办法
- vue-cli整合vuex的时候,修改actions和mutations,实现热部署
- Vue-cli创建项目从单页面到多页面2-history模式
- 在vue-cli模式下,单个vue组件引入外部框架的css,而不干扰其他组件的方式
- Jmeter GUI与CLI模式下实现对云服务器分布式压测配置及常见问题的解决,并模仿多用户压测
- Spring容器装饰者模式应用之实现业务类与服务类自由组合的解决方式
- vue-route部署后刷新出现404的解决
- vue先hash 模式部署项目,然后开启histroy模式 ,引发的几个问题以及histroy模式的开启方式、优点
- vue +vue-cli+vue router ,npm run build 打包完页面空白,不显示URL的#号router模式为history
- vue框架下部署上线后刷新报404问题解决方案
- Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
- VUE的history模式下除了index外其他路由404报错
- Vue的路由实现:hash模式 和 history模式 abstract模式