1. 项目背景
项目采用Vue3 + TypeScript + SpringBoot + Tomcat9
2. 具体实现
1、 更改SpringBoot为外部Tomcat启动
- 移除SpringBoot自带的Tomcat,在spring-boot-starter-web中添加如下代码
<exclusions>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
</exclusion>
</exclusions>
- 添加依赖
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
- 添加项目打包方式
<groupId>xxx.xxx.xx</groupId>
<artifactId>backend</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>backend</name>
<description>xxxx</description>
**<packaging>war</packaging>**
- 修改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);
}
}
- 更改项目部署设置
- 在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
注
- 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
- 部署后访问接口404 可以尝试将 前端请求接口时的Ip和端口去掉,例如:
axios.post('http://localhost:8080/basinArealRainfall/findAllByObserveTime', qs.stringify(params)).then(res => {
});
}
//修改为
axios.post('basinArealRainfall/findAllByObserveTime', qs.stringify(params)).then(res => {
});
}