Tomcat上部署vue项目（详细）包括安装，配置vue的history模式刷新404问题

代码-小子

已于 2024-06-05 15:20:00 修改

阅读量2.8k

点赞数 8

文章标签： tomcat java

于 2024-06-03 15:47:47 首次发布

本文链接：https://blog.youkuaiyun.com/Zhangwei557/article/details/139416188

版权

一、安装Tomcat

1、首先到官网下载Tomcat：Apache Tomcat® - Apache Tomcat 8 Software Downloads

自行选择版本

2、解压tomcat文件,可以通过快捷键(command+shift+G)把它放入/Library(资源库中)

3、在bin目录下打开终端

4、授权bin目录下的所有操作：终端输入

sudo chmod 755 *.sh

5、开启Tomcat，终端输入sudo sh ./startup.sh，输完回车


sudo sh ./startup.sh
 

sudo sh ./shutdown.sh

6、npm run build后生成dist文件，放到tomcat中webapps中，以labo为例

7、启动项目

补充：

1、配置vue的history模式刷新404问题下面的labo都要和webapps下包名一样

1、修改路由router的/index.js

const router = new VueRouter({
  mode: "history",//路由模式
  base: "/labo/",//部署的子路径
  routes,
});
 
export default router;

2、修改vue.config.js中的publicPath

const router = new VueRouter({
  mode: "history",//路由模式
  base: "/labo/",//部署的子路径
  routes,
});
 
export default router;

2、此时就需要解决在Tomcat上页面刷新找不到资源的问题了，如下：

在 Tomcat 下 webapps→test（test项目文件名）→创建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>

至此两个问题解决完成！！就可以正常访问了。

参考链接：解决Vue 项目部署到非根目录方法及刷新页面时找不到资源问题_vue 刷新会丢失子路径部署名-优快云博客