Vue前端+Springboot后端打成War包（两步到位，一键生成）
Vue前端+Springboot后端打成War包（两步到位，一键生成）
·
目录
1.背景
在个人项目中，需要实现Vue工程生成静态文件并可以快速复制到Springboot后端工程中并打包成war，此war可以放置到tomcat的webapps目录下
2.Vue前端
vue工程主要配置以下3个文件，分别是vue.config.js、.env.production、.env.development
2.1vue.config.js配置
配置情况如下：
module.exports = {
// 生成静态访问文件的目录
outputDir: 'dist',
assetsDir: '',
// 访问的上下文根路径
publicPath: '/grow/',
productionSourceMap: false,
devServer: {
open: true,
host: '0.0.0.0',
port: 8081,
https: false,
hotOnly: false
},
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: false,
modules: false,
sourceMap: false,
loaderOptions: {
less: {}
}
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
algorithm: 'gzip',
test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'), // 匹配文件名
threshold: 10240, //对超过10k的数据进行压缩
deleteOriginalAssets: false, //删除源文件，不建议
minRatio: 0.8
})
)
}
}
}
以上可重点关注属性outputDir、publicPath属性配置
2.2.env.development配置
VUE_APP_CURRENTMODE = 'development'
# 地址前缀
VUE_APP_BASE_PATH = 'http://localhost:9090'
# 当前访问工程上下文
VUE_APP_CONTEXT_PATH = '/grow/'
# 应用ID
VUE_APP_ID = 'grow'
# 应用名称
VUE_APP_NAME='成长笔记'
config.ctx.growWebUrl = urlsufix + 'localhost:9090/grow'
config.ctx.logoutGrowUrl = urlsufix + 'localhost:9090/grow/staff/logout'2.2.env.production配置
VUE_APP_CURRENTMODE = 'production'
# 地址前缀
VUE_APP_BASE_PATH = 'http://101.34.78.xxx:8089'
# 当前访问工程上下文
VUE_APP_CONTEXT_PATH = '/grow/'
# 应用ID
VUE_APP_ID = 'grow'
# 应用名称
VUE_APP_NAME='成长笔记'
config.ctx.growWebUrl = urlsufix + '101.34.78.xxx:8089/grow'
config.ctx.logoutGrowUrl = urlsufix + '101.34.78.xxx:8089/grow/staff/logout'其中101.34.78.xxx是正式环境的IP地址，
2.3生成静态文件
两个部署两个环境：正式环境和测试环境；正式环境读取的配置文件是.env.production，测试环境读取的配置文件是.env.development
3 Springboot后端工程
3.1SpringMvcConfigure
@Configuration
public class SpringMvcConfigure implements WebMvcConfigurer {
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(authenticationInterceptor()).addPathPatterns("/api/**"); // 拦截所有请求，通过判断是否有 @LoginRequired 注解 决定是否需要登录
}
@Bean
public AuthenticationInterceptor authenticationInterceptor() {
return new AuthenticationInterceptor();// 自己写的拦截器
}
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
}
}
其中可重点关注方法addResourceHandlers，用来告诉系统的静态文件位置
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
}3.2 pom.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>pe.plat</groupId>
<artifactId>grow</artifactId>
<version>1.0-SNAPSHOT</version>
</parent>
<artifactId>grow-web</artifactId>
<name>grow-web</name>
<version>1.0-SNAPSHOT</version>
<url>http://maven.apache.org</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<ui.path>D:\grow-workspace\grow-front\</ui.path>
</properties>
<dependencies>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<scope>provided</scope>
</dependency>
<!-- 核心模块 -->
<dependency>
<groupId>pe.plat</groupId>
<artifactId>grow-core</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<dependency>
<groupId>joda-time</groupId>
<artifactId>joda-time</artifactId>
<version>${joda.time.version}</version>
</dependency>
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
<version>${okhttp.version}</version>
</dependency>
<!--添加servlet-api的依赖-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.apache.tomcat</groupId>
<artifactId>tomcat-servlet-api</artifactId>
<version>8.0.36</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
<version>${spring.boot.version}</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<version>${spring.boot.version}</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
<version>${spring.boot.version}</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-aop</artifactId>
<version>${spring.boot.version}</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
<version>${spring.boot.version}</version>
<exclusions>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<version>${spring.boot.version}</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
<version>${spring.boot.version}</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<version>${spring.boot.version}</version>
<optional>true</optional>
</dependency>
<!-- Quartz定时任务 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-quartz</artifactId>
<version>${spring.boot.version}</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-core</artifactId>
</dependency>
<!-- SQL监控和格式 -->
<dependency>
<groupId>p6spy</groupId>
<artifactId>p6spy</artifactId>
<version>${p6spy.version}</version>
</dependency>
</dependencies>
<packaging>war</packaging>
<build>
<finalName>grow</finalName>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<groupId>org.apache.maven.plugins</groupId>
<version>${maven-compiler-plugin.version}</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>2.6</version>
<configuration>
<encoding>${project.build.sourceEncoding}</encoding>
<outputDirectory>${project.build.directory}</outputDirectory>
<resources>
<resource>
<targetPath>${basedir}/target/classes/static</targetPath>
<directory>${ui.path}/dist</directory>
</resource>
<!---->
<resource>
<targetPath>${basedir}/target/classes/templates</targetPath>
<directory>${ui.path}/dist</directory>
<includes>
<include>index.html</include>
</includes>
<filtering>true</filtering>
</resource>
<resource>
<targetPath>${basedir}/target/classes</targetPath>
<directory>src/main/resources</directory>
</resource>
</resources>
</configuration>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>${spring.boot.version}</version>
<configuration>
<mainClass>pe.plat.grow.WebApp</mainClass>
</configuration>
<executions>
<execution>
<goals>
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
<!---->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.6</version>
<configuration>
<webXml>./WEB-INF/web.xml</webXml>
</configuration>
</plugin>
</plugins>
</build>
</project>以上关于打包部分，可重点关注
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<ui.path>D:\grow-workspace\grow-front\</ui.path>
</properties>以上定义了前端代码的工程目录位置，注意非dist目录位置路径
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>2.6</version>
<configuration>
<encoding>${project.build.sourceEncoding}</encoding>
<outputDirectory>${project.build.directory}</outputDirectory>
<resources>
<resource>
<targetPath>${basedir}/target/classes/static</targetPath>
<directory>${ui.path}/dist</directory>
</resource>
<resource>
<targetPath>${basedir}/target/classes/templates</targetPath>
<directory>${ui.path}/dist</directory>
<includes>
<include>index.html</include>
</includes>
<filtering>true</filtering>
</resource>
<resource>
<targetPath>${basedir}/target/classes</targetPath>
<directory>src/main/resources</directory>
</resource>
</resources>
</configuration>
</plugin>以上定义了从前端Vue工程的文件复制到SpringBoot工程指定文件夹等
<packaging>war</packaging>以上是指定打包的方式war
4 一键打包
4.1bat编写
d:
cd D:\grow-workspace\grow-service\grow\grow-web
echo 执行清理和打包工作
mvn clean package -f pom.xml
echo 打包完成，按任意键结束
pause在windows系统下，新建文件命名为package2war.bat，并输入以上内容保存。
其中D:\grow-workspace\grow-service\grow\grow-web是Springboot后端工程地址，可按照自己的实际工程地址进行调整。
4.2bat执行
双击bat文件并执行验证
在目录：D:\grow-workspace\grow-service\grow\grow-web\target，寻找是否产生了最新的grow.war文件
4.3验证
将此grow.war放置tomcat的webapps目录下，并观察其tomcat的加载日志
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)