tomcat部署多个端口以及制定路径部署vue3方式

1. 配置Tomcat多端口

方法一：修改server.xml（最常用）

在 conf/server.xml 中添加新的 <Service> 配置：

<!-- 默认的8080端口服务 -->
<Service name="Catalina">
    <Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" />
    <Engine name="Catalina" defaultHost="localhost">
        <Host name="localhost" appBase="webapps"
              unpackWARs="true" autoDeploy="true">
        </Host>
    </Engine>
</Service>

<!-- 新增8081端口服务 -->
<Service name="Catalina2">
    <Connector port="8081" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8444" />
    <Engine name="Catalina2" defaultHost="localhost">
        <Host name="localhost" appBase="webapps2"
              unpackWARs="true" autoDeploy="true">
        </Host>
    </Engine>
</Service>

还需要创建对应的目录：

cd $CATALINA_HOME
mkdir webapps2

方法二：使用多个Connector（同一服务不同端口）

<Service name="Catalina">
    <!-- 默认8080端口 -->
    <Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" />

    <!-- 新增8081端口 -->
    <Connector port="8081" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8444" />

    <Engine name="Catalina" defaultHost="localhost">
        <Host name="localhost" appBase="webapps"
              unpackWARs="true" autoDeploy="true">
        </Host>
    </Engine>
</Service>

2. Vue3项目部署到Tomcat

步骤1：Vue3项目配置

vite.config.js（Vite项目）：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // 关键配置
  base: '/my-vue-app/', // 指定部署路径
  build: {
    outDir: 'dist',
    assetsDir: 'static',
    // 生成hash文件名，避免缓存问题
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
      }
    }
  }
})

vue.config.js（Vue CLI项目）：

module.exports = {
  publicPath: '/my-vue-app/', // 部署路径
  outputDir: 'dist',
  assetsDir: 'static',
  filenameHashing: true,

  // 生产环境配置
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.output.filename('static/js/[name].[contenthash:8].js')
      config.output.chunkFilename('static/js/[name].[contenthash:8].js')
    }
  }
}

步骤2：处理路由问题

router/index.js：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  // history模式需要服务器配置
  history: createWebHistory('/my-vue-app/'),
  // 或使用hash模式（无需服务器配置）
  // history: createWebHashHistory(),
  routes: [
    // 你的路由配置
  ]
})

步骤3：构建Vue项目

# 生产环境构建
npm run build
# 或
yarn build

步骤4：部署到Tomcat

方案A：部署到webapps根目录（默认上下文）

# 1. 复制dist文件夹内容到Tomcat
cd /path/to/tomcat/webapps
rm -rf ROOT  # 如果需要替换默认应用
cp -r /path/to/vue-project/dist/* ROOT/

# 2. 或创建新应用目录
mkdir myapp
cp -r /path/to/vue-project/dist/* myapp/
# 访问：http://localhost:8080/myapp

方案B：部署到指定路径（带上下文）

创建 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_4_0.xsd"
         version="4.0">

    <!-- 处理Vue Router的history模式 -->
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

目录结构：

my-vue-app/
├── index.html
├── static/
│   ├── js/
│   ├── css/
│   └── img/
└── WEB-INF/
    └── web.xml

打包为WAR文件：

# 在dist目录中创建WEB-INF/web.xml后
cd dist
jar -cvf my-vue-app.war *
mv my-vue-app.war $CATALINA_HOME/webapps/

3. 完整部署示例

示例：配置两个端口分别部署不同Vue应用

server.xml配置：

<?xml version="1.0" encoding="UTF-8"?>
<Server port="8005" shutdown="SHUTDOWN">

    <!-- 服务1：管理后台 (8080) -->
    <Service name="Catalina">
        <Connector port="8080" protocol="HTTP/1.1"
                   connectionTimeout="20000"
                   redirectPort="8443" />

        <Engine name="Catalina" defaultHost="localhost">
            <Host name="localhost" appBase="webapps"
                  unpackWARs="true" autoDeploy="true">

                <!-- 指定上下文路径 -->
                <Context path="/admin" docBase="/opt/apps/admin-vue"
                         reloadable="true" />
            </Host>
        </Engine>
    </Service>

    <!-- 服务2：用户前台 (8081) -->
    <Service name="UserService">
        <Connector port="8081" protocol="HTTP/1.1"
                   connectionTimeout="20000"
                   redirectPort="8444" />

        <Engine name="UserService" defaultHost="localhost">
            <Host name="localhost" appBase="webapps2"
                  unpackWARs="true" autoDeploy="true">

                <Context path="" docBase="/opt/apps/user-vue"
                         reloadable="true" />
            </Host>
        </Engine>
    </Service>
</Server>

自动部署脚本 deploy.sh：

#!/bin/bash

# 部署脚本
TOMCAT_HOME="/opt/tomcat"
VUE_PROJECT="/opt/projects/vue-app"

echo "开始构建Vue项目..."
cd $VUE_PROJECT
npm run build

echo "备份旧版本..."
BACKUP_DIR="/opt/backup/$(date +%Y%m%d_%H%M%S)"
mkdir -p $BACKUP_DIR
cp -r $TOMCAT_HOME/webapps/myapp $BACKUP_DIR/ 2>/dev/null || true

echo "部署新版本..."
rm -rf $TOMCAT_HOME/webapps/myapp
mkdir -p $TOMCAT_HOME/webapps/myapp
cp -r $VUE_PROJECT/dist/* $TOMCAT_HOME/webapps/myapp/

# 添加web.xml处理history模式
cat > $TOMCAT_HOME/webapps/myapp/WEB-INF/web.xml << EOF
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>
EOF

echo "重启Tomcat..."
$TOMCAT_HOME/bin/shutdown.sh 2>/dev/null || true
sleep 5
$TOMCAT_HOME/bin/startup.sh

echo "部署完成！"

4. 配置Nginx反向代理（推荐）

对于生产环境，建议使用Nginx作为反向代理：

server {
    listen 80;
    server_name example.com;

    location /my-vue-app/ {
        proxy_pass http://localhost:8080/my-vue-app/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        # 处理Vue Router的history模式
        try_files $uri $uri/ /my-vue-app/index.html;
    }

    location /api/ {
        proxy_pass http://localhost:8081/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

5. 常见问题解决

问题1：刷新页面404

解决：配置web.xml的error-page或使用Nginx try_files

问题2：静态资源路径错误

解决：确保Vue配置中 publicPath 与部署路径一致

问题3：跨域问题

解决：配置Tomcat的CORS过滤器或在Nginx中配置代理

问题4：端口冲突

解决：检查端口占用 netstat -tlnp | grep 8080

总结

方案	优点	缺点
多Service	完全隔离，不同应用独立	配置复杂，资源占用多
多Connector	配置简单	共享同一服务资源
Nginx代理	性能好，功能丰富	需要额外部署Nginx

建议生产环境使用 Nginx + Tomcat多端口 的组合方式，既能灵活管理端口，又能获得更好的性能和安全性。