Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来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中文网其它相关文章!
推荐阅读:
以上是Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

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

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

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

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

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

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

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

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