Tomcat部署Vue router History 模式_vue3 history怎么部署tomcat

参考了网上的方法，但是有些许bug，稍作修改后亲测有效，以此记录

部署有两种方式：

1. 访问地址为IP+端口，如 http://192.168.1.xx:8080，此时router形式为 http://192.168.1.xx:8080/user
2. 访问地址为IP+端口+项目名，如 http://192.168.1.xx:8080/app，此时router形式为 http://192.168.1.xx:8080/app/user

一、IP+端口方式

需要修改Tomcat安装目录下的conf/server.xml，增加Context标签, 设置 docBase="/app" ，其中的app就是webapps目录下的项目名称（文件夹名）

<Context docBase="/app" path="" reloadable="true" />
1

如下图

注意这里

• context指上下文，实际上就是一个web项目
• path是虚拟目录，访问的时候用127.0.0.1:8080/aaa/*.jsp访问网页
• docBase是网页实际存放位置的根目录，映射为path虚拟目录
• reloadable="true"表示你修改了jsp文件后不需要重启就可以实现显示的同步

配置完之后，把vue项目打包后的静态文件放在Tomcat下的webapps/app文件夹中，如下图

然后浏览器输入IP+端口就可以访问到项目了

二、IP+端口+项目名方式

这种方式首先需要配置路由base 属性，这里的app和上文中的项目名称/文件夹名要保持一致

注意：设置好base之后，路由跳转的时候就会带上/app前缀，比如path为/user路由，跳转过去就是http://192.168.1.xx:8080/app/user
此外要配置vue.config.js（如果没有这个文件，则手动添加） 中的配置项publicPath，把publicPath设置成./即可，此时是相对路径，好处是随处可打开

然后因为是history模式，要防止在路由下刷新变成404错误，这需要让tomcat都定位到首页，也就是index.html页
在项目目录下新建WEB-INF文件夹， 接着在WEB-INF文件夹下新建 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>
1
2
3
4
5
6
7
8
9
10
11

大致意思就是：服务端404时就去到index.html页，这样客户端的history模式路由就会生效

至此，浏览器输入IP+端口+项目名称就可以访问到项目了

参考：
Tomcat下部署vue项目[history模式]