Tomcat 本地部署前后端分离项目

主要介绍一下，如何将springBoot + Vue前后端分离项目部署到Tomcat中。
默认Tomcat已经安装配置完毕。

目录

1. 后端打包为war包
   (1) pom.xml 中将打包格式设置为 war - 默认为 jar
   (2) 排除springBoot内嵌的Tomcat
   (3) 打包
2. 前端打包
   (1) 进入前端控制台
   (2) 修改相关配置信息
   (3) 安装依赖
   (4) 执行打包命令
3. 部署到Tomcat步骤
   (1) 进入到前端打包文件夹目录中，新建文件夹WEB-INF，在其中创建文件web.xml
   (2) 修改Tomcat配置文件server.xml
   (3) 启动Tomcat
4. 访问测试结果

详细步骤

1. 后端打包为war包
   (1) pom.xml 中将打包格式设置为 war - 默认为 jar
   在dependencies的同级添加<packaging>war</packaging>, 如图所示:
   
   (2) 排除springBoot内嵌的Tomcat

   • 依赖排除:

   <!-- SpringBoot Web容器 -->
   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-web</artifactId>
       <!-- 移除嵌入式tomcat插件 -->
       <exclusions>
           <exclusion>
               <groupId>org.springframework.boot</groupId>
               <artifactId>spring-boot-starter-tomcat</artifactId>
           </exclusion>
       </exclusions>
   </dependency>
   

   • 设置 scope属性值为: provided:

   <dependency>
    	<groupId>org.springframework.boot</groupId>
     	<artifactId>spring-boot-starter-tomcat</artifactId>
     	<scope>provided</scope>
   </dependency>
   

   (3) 打包: mvn package

   • 命令打包: mvn package
   • idea工具打包
     
     打包完成后生成一个 ***.war 包:
     

2. 前端打包
   (1) 修改相关配置信息 - 以若依前后端分离框架为例

   • 修改vue.config.js
     

     • 修改打包环境的路径: 与打包文件夹名称一致
     • 保证后端IP/端口号与此处一致
     • 代理重定向指定为war包名称即.env.production文件:
       

   (2) 安装依赖

   • 先进入前端控制台
     
   • 安装依赖npm install --registry=https://registry.npm.taobao.org:
     
     

   (3) 执行打包命令 - 同样以若依框架为例:

   • 执行命令: npm run build:prod:
     • 开始打包
       
     • 打包结束:
       
       
       dist为打包好的文件,node_modules为依赖包

3. 部署到Tomcat步骤
   (1) 将前端后端打包文件复制一份到Tomcat安装目录的webapps文件夹

   • dist与***.war包复制到Tomcat安装目录的webapps文件夹中
     
     (2) 新建文件
   • dist文件中新建文件夹WEB-INF
     
   • 在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>
     

   (3) 修改Tomcat安装路径下配置文件中的catalina.properties与server.xml

   • catalina.properties修改:

     tomcat.util.scan.StandardJarScanFilter.jarsToSkip=\ 修改为:
     tomcat.util.scan.StandardJarScanFilter.jarsToSkip=*.jar

   • server.xml修改:

     <!-- Tomcat 端口号 - 默认8080 -->
     <Connector port="9090" protocol="HTTP/1.1"
            connectionTimeout="20000"
            redirectPort="8443"
            maxParameterCount="1000"
            />
     ...
     <!-- Host节点下添加 -->
     <Context docBase="dist" path="" reloadable="false" />
     

     docBase指打包文件夹名称,根据自己实际打包前端文件夹名称来指定

   (5) 进入安装目录bin中启动Tomcat: 双击 startup.bat

   • 访问路径: IP + Tomcat端口即可