首页 web前端 js教程 Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理

Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理

May 21, 2018 pm 01:54 PM
tomcat web webpack

这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,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/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) 
  }
 ]
})
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

php生成自定义长度随机字符串步骤详解

php生成随机数字、字母或数字字母混合的字符串

以上是Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

tomcat如何部署jar项目 tomcat如何部署jar项目 Apr 21, 2024 am 07:27 AM

要将 JAR 项目部署到 Tomcat,请遵循以下步骤:下载并解压 Tomcat。配置 server.xml 文件,设置端口和项目部署路径。将 JAR 文件复制到指定的部署路径中。启动 Tomcat。使用提供的 URL 访问已部署的项目。

tomcat服务器怎么让外网访问 tomcat服务器怎么让外网访问 Apr 21, 2024 am 07:22 AM

要让 Tomcat 服务器对外网访问,需要:修改 Tomcat 配置文件,允许外部连接。添加防火墙规则,允许访问 Tomcat 服务器端口。创建 DNS 记录,将域名指向 Tomcat 服务器公有 IP。可选:使用反向代理提升安全性和性能。可选:设置 HTTPS 以提高安全性。

tomcat怎么部署多个项目 tomcat怎么部署多个项目 Apr 21, 2024 am 09:33 AM

要通过 Tomcat 部署多个项目,需要创建每个项目的 webapp 目录,然后:自动部署:将 webapp 目录放置在 Tomcat 的 webapps 目录中。手动部署:在 Tomcat 的 manager 应用程序中手动部署项目。项目部署后,可以通过其部署名称访问,例如:http://localhost:8080/project1。

tomcat安装目录在哪里 tomcat安装目录在哪里 Apr 21, 2024 am 07:48 AM

Tomcat 安装目录:默认路径:Windows:C:\Program Files\Apache Software Foundation\Tomcat 9.0macOS:/Library/Tomcat/Tomcat 9.0Linux:/opt/tomcat/tomcat9自定义路径:安装时可指定。查找安装目录:使用 whereis 或 locate 命令。

tomcat网站根目录在哪里 tomcat网站根目录在哪里 Apr 21, 2024 am 09:27 AM

Tomcat 网站根目录位于 Tomcat 的 webapps 子目录中,用于存储 Web 应用程序文件、静态资源和 WEB-INF 目录;它可以通过查找 Tomcat 配置文件中的 docBase 属性来找到。

tomcat并发连接数怎么查看 tomcat并发连接数怎么查看 Apr 21, 2024 am 08:12 AM

查看Tomcat并发连接数的方法:访问Tomcat Manager页面(http://localhost:8080/manager/html),输入用户名和密码。在左侧导航栏中点击Status->Sessions,即可在页面顶部看到并发连接数。

tomcat的端口号怎么看 tomcat的端口号怎么看 Apr 21, 2024 am 08:00 AM

Tomcat端口号可通过以下方法查看:检查server.xml文件中的<Connector>元素的port属性。访问Tomcat管理界面(http://localhost:8080/manager/html)并查看"Status"选项卡。在命令行中运行"catalina.sh version"并查看"Port:"行。

tomcat怎么运行两个不同端口号的项目 tomcat怎么运行两个不同端口号的项目 Apr 21, 2024 am 09:00 AM

在Tomcat服务器上运行不同端口号的项目需要以下步骤:修改server.xml文件并添加Connector元素以定义端口号。添加Context元素以定义与端口号关联的应用程序。创建WAR文件并部署到相应目录(webapps或webapps/ROOT)。重启Tomcat以应用更改。

See all articles