后端 SpringBoot + 前端 vue 打包发布到Tomcat

近段时间 做了一些前后端的开发 需要在Tomcat里进行发布    把自己整理的分享出来

后端打包

pom.xml 文件

 <packaging>war</packaging>

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

<--去掉内置的Tomcat-->
<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-tomcat</artifactId>
                </exclusion>
            </exclusions>
</dependency>

 <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

启动类：Application

@ServletComponentScan
@SpringBootApplication

//继承SpringBootServletInitializer 类
public class Application extends SpringBootServletInitializer {
　　 public static void main(String[] args) {
　　　　　　SpringApplication.run(Application.class, args);
　　 }
//重写configure方法
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
        return builder.sources(Application.class);
    }
}

在终端执行命令 mvn clean package

项目刷新 会多出一个target目录

.war的包 拷贝到Tomcat的webapps目录下即可 

效果如下：（开启tomcat）

传送门

前端vue 打包

输入指令 ： npm run build

项目目录会多出一个 dist目录 如下所示：

将dist目录拷贝到Tomcat 下的webapps目录下即可 ：

效果如下：（开启tomcat）

传送门

文章借鉴于：https://yq.aliyun.com/articles/479023