遇到的问题
使用 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/javaee
- http://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 错误问题的解决方案, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/140166.htm