后端 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