Vue前端+Springboot后端打成War包（两步到位，一键生成）

最新推荐文章于 2024-05-23 21:30:20 发布

这是个假程序员

最新推荐文章于 2024-05-23 21:30:20 发布

阅读量3.4k

点赞数 3

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/cshongye/article/details/106579741

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.背景

2.Vue前端

2.1vue.config.js配置

2.2.env.development配置

2.2.env.production配置

2.3生成静态文件

3 Springboot后端工程

3.1SpringMvcConfigure

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
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue前端+Springboot后端打成War包（两步到位，一键生成）

Vue前端+Springboot后端打成War包（两步到位，一键生成）
复制链接

扫一扫

专栏目录

Vue前端+Springboot后端打成War包（两步到位，一键生成）

1.背景

2.Vue前端

2.1vue.config.js配置

2.2.env.development配置

2.2.env.production配置

2.3生成静态文件

3 Springboot后端工程

3.1SpringMvcConfigure

3.2 pom.xml配置

4 一键打包

4.1bat编写

4.2bat执行

4.3验证

“相关推荐”对你有帮助么？