Vue项目webpack打包部署到Tomcat，刷新报404错

遇到的问题

使用webpack打包vue后，将打包好的文件，发布到Tomcat上，访问成功，但是刷新后页面报404错。

在网上查找了一下，原来是HTML5 History 模式引发的问题，具体为什么，vue官方已经给出了解释，你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html

但是看完问题又来了，官方给出的解决方案中没有说tomcat下，怎么决解。

解决方案

根据官方给出的解决方案原理

你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

所以在tomcat服务器下你可以这么做。在打包好的项目根目录下新建一个WEB-INF文件夹，在WEB-INF中写一个web.xml。
web.xml中写：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaeehttp://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"version="3.1" metadata-complete="true"><display-name>Router for Tomcat</display-name><error-page><error-code>404</error-code><location>/index.html</location></error-page>
</web-app>

这样的目的就是一旦出现404就返回到 index.html 页面。
最后还需要配置一下你的route，配置一个覆盖所有的路由情况，然后在给出一个 404 页面。

const router = new VueRouter({mode: 'history',routes: [{ path: '*', component: (resolve) => require(['./views/error404.vue'], resolve)  }]
})

Vue项目webpack打包部署到Tomcat，刷新报404错相关推荐

php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
Vue项目的打包\部署\优化
Vue项目的打包\部署\优化如果有帮助到你麻烦点个赞或者收藏 +关注哟以后会经常发布一些干货文章我只是一个前端小菜鸟,大佬勿喷! 一.nginx 开启 gzip 理论上,nginx 开启 ...
为 VUE 项目添加 PWA 解决发布后刷新报错问题
为 VUE 项目添加 PWA 解决发布后刷新报错问题参考文章: (1)为 VUE 项目添加 PWA 解决发布后刷新报错问题 (2)https://www.cnblogs.com/morang/p/9 ...
vue项目webpack打包配置
基于vue/cli3.0+脚手架搭建Vue项目(12) 文章目录基于vue/cli3.0+脚手架搭建Vue项目(12) 前言一.webpack配置 1.配置vue.config.js 2.配置Dl ...
VUE项目WebPack打包删除注释和console
项目中使用了 jspdf 这个插件,webpack打包后注释里存在这样的领导让删除,于是使用插件 cnpm install uglifyjs-webpack-plugin -D vue.config ...
Nginx下同域部署多个Vue项目（history路由模式），报404、500错误
主要内容一.环境二.问题描述三.问题解决 1.修改vue项目中的vue.config.js文件 2.修改Nginx的nginx.conf配置文件 3.Nginx目录结构一.环境系统: win ...
vue项目webpack打包优化体积优化，打包体积减少200kb到4Mb
解决方法 1.压缩图片应尽可能地压缩项目中的图片,或使用svg矢量图.雪碧图.webp图片(此种图片仅兼容谷歌和opera浏览器,但图片的体积更小)等小体积的图片,达到减少打包体积的目的. 2.路由 ...
mvn打包并部署本地tomcat_maven项目自动打包部署到tomcat中
1. 在eclipse配置tomcat,部署路径设置为tomcat的webapps目录下. 2.修改tomcat-users.xml 3.maven的settings.xml 文件打开,写入用户名和密 ...
在Vue 项目 webpack 打包中关于背景图片的路径问题
第一次发segmentfault ,记录一下关于最近生产环境,开发环境路径问题. 开发环境下我们可以在vue中引入相对路径,但在生产环境,会默认为根目录static,所以我们需要在config 目录下 ...

Vue项目webpack打包部署到Tomcat，刷新报404错

遇到的问题

解决方案

Vue项目webpack打包部署到Tomcat，刷新报404错相关推荐

最新文章

热门文章