Vue+SpringBoot前后端分离项目打war包流程与部署到本地的流程

相信很多人第一次使用前后端分离项目打包的时候不知道该怎么做，我也是踩了无数坑最后才成功的，不到最后一刻千万不要放弃！步骤如下

1、打包Vue项目

cmd中输入命令 npm run build 后就可打包成功，前提是代码没有报错

打包完成后项目路径下会生成一个新的文件夹dist，打包后的东西都在里面

2、整合Vue项目和SpringBoot项目

将Vue项目dist文件夹下的所有文件Copy到SpringBoot项目的resource/static目录下

 接下来就是Spring的配置了

3、打包SpringBoot项目成war包

首先将pom.xml项目中的内置Tomcat依赖删除

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

pom.xml项目中还需要添加如下生成器，若报错则是maven-resources-plugin的版本问题，修改一下版本即可

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.1.0</version>
        </plugin>
    </plugins>
</build>

Spring的启动类需要添加一些配置

package com.book;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

@SpringBootApplication
@MapperScan("com.book.*.mapper")
public class BookApplication extends SpringBootServletInitializer {

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(BookApplication.class);
    }

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

}

然后将跨域的配置文件修改如下

package com.book.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                //.allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST","PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

接下来就是打包了，使用Maven快捷工具即点击install或用cmd命令打包，最后可以看到打包成功了

若上述步骤执行完还是报错则将SpringBoot的版本也需要更改一下 ，下面是我打包成功的版本

之后打开cmd输入命令 java -jar war包的名字.war 即可成功运行

 

这边需要注意的是这里访问的端口号是你后端SpringBoot中开启的端口