Vue3 + vue router 在history模式下部署到tomcat方案

项目配置

本项目名称以ky为例

一、非根目录配置

1、Vue Router ：

router = createRouter({
    mode: 'history',
    base: '/ky/',
    history:createWebHistory('/ky/'),
    routes,
});

对于vue router 4+版本，除了配置base外，还需要配置history的createWebHistory('/ky/'),其中填入base的路径，否则无法访问!

* 为防止在项目开发过程中产生错误，可将地址作为计算参数传入(开发时直接访问ip+端口)

router = createRouter({
    mode: 'history',
    base: getBasePath(),
    history:createWebHistory(getBasePath()),
    routes,
});

function getBasePath(){
    return process.env.NODE_ENV === "production"?'/ky/':'';
}

2、vue.config.js

module.exports = {
    publicPath: "/ky/",//必填
    outputDir: "dist", // 可选
    assetsDir: "./assets", //可选
}

对于vue3版本的打包参数有变动，如上图所示

3、web.xml

未防止项目放入tomcat访问后刷新页面404问题，需要在项目中添加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>ky</display-name>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

将WEB-INF文件夹放入部署根目录，例如ky目录下

4、部署

将ky文件夹放入tomcat\webapps目录下，启动tomcat，输入ip+端口+项目名称即可访问，例如http://127.0.0.1:8080/ky

二、根目录模式

若要将项目部署到tomcat\webapps\ROOT下

常见问题