麟の随笔

  • 游戏
  • 影视
  • Tech
  1. 首页
  2. 科技
  3. 前端
  4. 正文

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

2022年10月25日 230点热度 1人点赞 0条评论

项目配置

名称 版本
vue 3.2.27
vue-router 4.0.12
tomcat 9.0.44

本项目名称以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下

常见问题

标签: 暂无
最后更新:2022年10月25日

Kylin

必须有人浴血奋战,世上才有自由可言!

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

文章目录
  • 项目配置
    • 一、非根目录配置
    • 二、根目录模式
  • 常见问题

COPYRIGHT © 2023 kirinz.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

闽ICP备19013981号