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

最新推荐文章于 2024-10-09 17:21:00 发布
最新推荐文章于 2024-10-09 17:21:00 发布
阅读量3.8k 收藏 6
点赞数 3
分类专栏： 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cshongye/article/details/106579741
版权

目录

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验证

​​​​​​​

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的加载日志

这是个假程序员
关注
专栏目录
基于vue前端+springboot后端的考勤系统大作业（研究生java大作业）.zip
01-10
基于vue前端+springboot后端的考勤系统大作业（研究生java大作业）.zip 基于vue前端+springboot后端的考勤系统大作业（研究生java大作业）.zip 基于vue前端+springboot后端的考勤系统大作业（研究生java大作业）.zip...
（window） maven项目下分模块vue前端和springboot项目打包为一个war包并部署在一台jboss机子上
如的博客
01-08 982
前面的文章有讲过前端和后端分开部署的文章 前端分离部署 https://blog.csdn.net/qiumen/article/details/111661326 后端分离部署 https://blog.csdn.net/qiumen/article/details/111363308 当前用的jboss版本是wildfly-18.0.1.Final 项目背景 maven管理springboot项目，创建了frontend和backend后端两个模块。前端是vue，后端是spri..
Vue+SpringBoot前后端分离项目打war包流程与部署到本地的流程
weixin_45061591的博客
12-27 4300
相信很多人第一次使用前后端分离项目打包的时候不知道该怎么做，我也是踩了无数坑最后才成功的，不到最后一刻千万不要放弃！步骤如下 1、打包Vue项目 cmd中输入命令npm run build后就可打包成功，前提是代码没有报错 打包完成后项目路径下会生成一个新的文件夹dist，打包后的东西都在里面 2、整合Vue项目和SpringBoot项目 将Vue项目dist文件夹下的所有文件Copy到SpringBoot项目的resource/static目录下 接下来就是Spring的配置...
Node脚本实现批量打包Vue项目(child_process子进程、window)
最新发布
lplovewjm的博客
10-09 1106
前几天用pnpm+workspace实现了monorepo，也就是单仓库多个项目，并且互相之间可能存在一定的联系。所以就存在一个打包的问题，也就是说，我想在打包某个特定子项目时，其他项目也执行build的命令。主要用到的是node的child_process子进程，话不多说，下面开始讲解，最后放出源代码。
【SSM+VUE 项目部署】前后端分离的spring+vue项目的部署全过程，简单易上手
Barnes3255的博客
03-04 1925
整理一下部署的过程和要注意的地方。csdn上大多都是springboot项目的部署，这里总结一下前后端分离的spring+vue项目的war包部署。租服务器过程就省略了，网上有很多相关教程。网上教程大多使用XShell远程工具连接，我直接使用的是阿里云提供的网页上的远程连接，以及使用宝塔面板进行相关操作。
vue项目如何打war包
你的小可爱的博客~
09-22 1954
也可以使用其他方式打包，比如 webpack 的插件库中提供了一个叫 webpack-war-plugin 的插件，可以很便捷的做到这一点。执行如下命令打war包，由于打 war 包需要用到 jar 命令，需要事先安装好 jdk 并配置 java 环境变量。这里我们使用的是 java 命令打 war 包，所以还需要安装 java 开发环境：安装 JDK 并配置好环境变量。执行 npm run build 构建项目，会在项目根目录生成 dist 目录，构建后的文件都在此目录下。
vue项目打包放入javaweb中
H1455483319的博客
10-14 2673
1.修改vue中路由的模式为hash，或者不写（默认hash） const router = new VueRouter({ routes }) 2.将入口的main.js中的axios请求地址前缀删除 或者注释 // axios.defaults.baseURL = '/api' 3.执行npm run build进行打包，会生成dist文件 4.将static和index.html放入java项目中的webapp下 5.删除WEB-INF下的index.jsp 6.启动服务器 ...
Vue项目的打包方式、生成dist文件夹、assetsPublicPath、publicPath、history、hash
CSDN博客主页地址：https://mengjian.blog.csdn.net/
04-01 4942
Vue项目的打包方式、生成dist文件夹、assetsPublicPath、publicPath、history、hash
研究生java大作业，考勤系统大作业，vue前端+springboot后端.zip
09-02
vue前端+springboot后端.zip研究生java大作业，考勤系统大作业，vue前端+springboot后端.zip研究生java大作业，考勤系统大作业，vue前端+springboot后端.zip研究生java大作业，考勤系统大作业，vue前端+springboot...
考勤系统的设计与实现，vue前端+springboot后端.zip
09-11
《考勤系统的设计与实现——Vue前端+SpringBoot后端》 在当今信息化社会，企业对内部管理的需求日益增强，考勤系统作为企业管理的重要组成部分，能够有效地跟踪员工的出勤情况，提高工作效率。本项目“考勤系统的...
研一下考勤系统大作业，vue前端+springboot后端HW_LiGang.zip
05-17
该项目利用了基于springboot + vue + mysql的开发模式框架实现的课设系统，包括了项目的源码资源、sql文件、相关指引文档等等。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理...
webpack项目部署到服务器,vue项目通过webpack插件打包后自动部署到服务器
weixin_39841825的博客
08-05 738
我们在实际开发中经常会遇到版本不停迭代，然后我们需要把webpack打包好的文件上传出到服务器，这个是比较麻烦的，今天我给大家分享一个在vue项目中通过运行npm run build 生成打包好的文件后直接上传服务器，不要我们每次都手动拷贝。这个方案的思路是我们自己写一个的webpack的插件，在打包完成的时候把生成的文件名和数据通过post请求上传服务器，服务器获取到数据和文件名，重新生成文件到...
webpack打包vue项目之后生成的文件如何运行
u013746071的专栏
05-30 3371
我的项目里面：webpack打包之后生成的文件放在 market 目录下； 所以根据官方文档可以做如下操作： npm install -g serve (全局安装) serve -s market (运行打包后的文件) 这样在：http://localhost:5000 这个网址就能看到打包之后的效果了； 注意：一般前端项目里面的请求是通过代理请求其他后端接口的...
Vue中如何进行打包与部署？
热门推荐
stormjun的博客
06-10 2万+
本文介绍了Vue中如何进行打包与部署，包括使用Webpack进行打包、使用Nginx进行部署和使用Docker进行容器化部署。这些方法都是常用的Vue应用程序的打包和部署方法，可以根据实际需要选择合适的方法进行部署。
vue单页面项目打包之后生成很多个js文件
棠樾的博客
11-26 8085
问题：一个vue单页面项目，但是打包之后生成了很多个js文件，和css文件 原因是因为这种写法是路由懒加载（官方解释） component: () => { return import('../views/login/index.vue'); } import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path...
Vue系列 - 从创建vue到项目打包发布全过程总结
ws6afa88的博客
10-23 1339
1 创建vue 项目 1.1 安装基本环境 1.安装vue和node.js 的express 2.这里假设都安装完npm和node.js环境 vue3.0 安装 npm install -g @vue/cli 1.2 vue3.0创建项目 vue create my-project cd my-project npm run serve # 1.Manually select features # 2.选择Router，Vuex，CSS Pre-processors，
VUE前端打包发布到tomcat
weixin_42587270的博客
05-23 1774
整体思路： 后端和前端都打包用tomcat部署。部署在同一个tomcat下的webapp目录下。这样不会出现跨域问题。开发时前后端分离开发，为了解决跨域，在vite.config.js中会配置proxy反向代理，但是打包发布的时候，这个代理时不生效的，需要在web容器中配置代理。 这里前后端都用同一个tomcat发布的话，不存在跨域，就不用配置代理了。 1、项目打包之前，需要调整一点配置。假如前端访问地址时 127.0.0.1:8081/glui,这样项目访问后台接口时，访问的地址就会是127.0.0.1:
Vue打包后生成一个可修改接口地址的配置文件
林中明月间丶
10-08 2821
先给几个参考： https://blog.csdn.net/cccdf_jjj/article/details/99593533vue2.0中实现打包后可配置接口地址 https://blog.csdn.net/qq_41409679/article/details/84878642?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值