Vue3打包放到SpringBoot项目中部署到服务器

1. 项目背景

项目采用Vue3 + TypeScript + SpringBoot + Tomcat9

2. 具体实现

1、 更改SpringBoot为外部Tomcat启动

1. 移除SpringBoot自带的Tomcat，在spring-boot-starter-web中添加如下代码

<exclusions>
    <exclusion>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-tomcat</artifactId>
    </exclusion>
</exclusions>

2. 添加依赖

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>4.0.1</version>
    <scope>provided</scope>
</dependency>

3. 添加项目打包方式

<groupId>xxx.xxx.xx</groupId>
<artifactId>backend</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>backend</name>
<description>xxxx</description>
**<packaging>war</packaging>** 

4. 修改SpringBoot启动类 继承SpringBootServletInitializer类并重写configure方法

public class BackendApplication extends SpringBootServletInitializer {
    public static void main(String[] args) {
        SpringApplication.run(BackendApplication.class, args);
    }

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
        return builder.sources(BackendApplication.class);
    }
}

5. 更改项目部署设置
   
6. 在Tomcat中添加项目部署设置
   添加Tomcat方式启动
   
   选择Tomcat
   
   添加刚刚配置的项目部署设置，并设置项目默认访问路径为 /
   
   至此SpringBoot改用外置Tomcat启动配置完成

2、Vue3打包

npm run build 打包后
在项目目录中找到dist文件夹，复制文件夹中的文件放到SpringBoot项目中的static文件中。

3、后端打包

在Maven中找到Lifecycle，先点击Clean清空，在Package打包，打包完成后在项目的target文件夹中会生成一个war包 例如‘shuiyangjiang.war’

4、在服务中部署

如果服务器中有Tomcat的话，直接将War包放在Tomcat webapps目录下 运行Tomcat会自动解压War包。
如服务器没有Tomcat 则需要下载一个新的Tomcat放到服务器中，如果服务器中的JDK与项目使用的JDK版本不一致的话，可以在Tomcat bin目录中的setclasspath.bat 文件中添加如下代码

set JAVA_HOME=jdk目录

确保Tomcat可以正常启动后，将War包放入webapps目录下 启动Tomcat ，通过http://ip:端口/在yml文件中定义的name测试部署是否正常，例如 http://127.0.0.0:8080/shuiyangjiang

注

1. Tomcat控制台乱码的话再 Tomcat/config目录的logging.properties文件，将UTF-8修改为GBK

java.util.logging.ConsoleHandler.level = FINE
java.util.logging.ConsoleHandler.formatter = java.util.logging.SimpleFormatter
java.util.logging.ConsoleHandler.encoding = GBK

2. 部署后访问接口404 可以尝试将 前端请求接口时的Ip和端口去掉，例如：

axios.post('http://localhost:8080/basinArealRainfall/findAllByObserveTime', qs.stringify(params)).then(res => {
      });
    }
//修改为
axios.post('basinArealRainfall/findAllByObserveTime', qs.stringify(params)).then(res => {
      });
    }

至此Vue3打包放到SpringBoot项目中部署到服务器结束，仅供参考，接受指正。