vue前端 + Springboot后端整合打War包部署

最新推荐文章于 2024-10-05 22:46:21 发布
最新推荐文章于 2024-10-05 22:46:21 发布
阅读量3.1k 收藏 12
点赞数 1
分类专栏： 学习记录 文章标签： vue spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34382962/article/details/111673960
版权
本文记录了将Vue前端与SpringBoot后端整合并打包成War包部署到Tomcat的过程，包括Vue的publicPath、outputDir、assetsDir配置，以及打包时遇到的坑点，如访问不跳转默认页、API路径配置和404错误。同时，提到了SpringBoot的打包流程和注意事项，以及Tomcat的部署操作。
摘要由CSDN通过智能技术生成

vue前端 + Springboot后端整合打War包部署

  • 场景说明
    • 前端是基于 vue element admin 修改的后台管理页面
    • 后端是基于 springboot 整合mybatis springmvc 开发的操作db的接口
  • 本来是做成前后端分离，但是上司要求整合起来打包放在tomcat上供其他成员访问，因为没有做过，中间还是有点磕磕绊绊的。做一些记录，方便日后回看

一，Vue方面

在这里插入图片描述

  • 整体一看还是有点头大，这里不针对其他科目做记录，仅针对会影响打包的配置项进行记录

publicPath

  • Type: string
  • Default:'/'部署应用包时的基本 URL。用法和 webpack 本身的output.publicPath一致，但是 Vue CLI 在一
最低0.47元/天 解锁文章
呓语落花
关注
专栏目录
Vue+SpringBoot前后端分离项目打war包流程与部署到本地的流程
weixin_45061591的博客
12-27 4301
相信很多人第一次使用前后端分离项目打包的时候不知道该怎么做，我也是踩了无数坑最后才成功的，不到最后一刻千万不要放弃！步骤如下 1、打包Vue项目 cmd中输入命令npm run build后就可打包成功，前提是代码没有报错 打包完成后项目路径下会生成一个新的文件夹dist，打包后的东西都在里面 2、整合Vue项目和SpringBoot项目 将Vue项目dist文件夹下的所有文件Copy到SpringBoot项目的resource/static目录下 接下来就是Spring的配置...
springboot和Vue合并部署
weixin_38738049的博客
03-24 1195
springboot和Vue合并部署
SpringBoot项目：前后端打包与部署（使用 Maven）
最新发布
学不会就接着学
10-05 1459
为了提高效率，可以编写脚本来自动化整个打包和部署过程。例如，使用 Bash 脚本。：希望打包出什么东西、什么形式，都可以通过添加插件进行控制。根据实际需求，通过 Git、SVN 等方式上传到服务器。表示在构建时跳过测试的执行，这通常用于加快构建过程。如果大家有任何自动化相关的想法，可以一起讨论。文件夹，里面包含编译后的静态文件。如果使用私有仓库，确保在。同样，根据需求上传到服务器。中配置好仓库信息和认证。这将在项目目录下生成一个。
Springboot前后端分离项目合并一起打war包
weixin_60797985的博客
04-11 1020
5.之前在main方法中要初始化一些业务，因为要打war包之后main方法不会执行，所以建一个新的配置类来执行业务初始化代码。8.使用maven插件打包即可，打包之前最好clean一下，之后部署在外部tomcat里就可以访问到了。方式二：使用scope标签控制依赖的使用范围，设置参数为provided。7.在build标签下配置resource标签，确保将前端文件打到war包中。6.将前端文件拷贝到resource目录下的static目录下。4.修改启动类（启动类的main方法在打war包后不会执行）
前后端合并部署/打包webjar/maven打包web静态资源
qq_39601214的博客
06-26 607
部署前后端项目的方式有多张，本文的部署方式是使用java打包前端静态资源成jar包，直接运行jar包即可访问网页。1.将dist文件夹的内容复制到java项目中的resources文件夹中。以前端VUE项目+后端springboot为例。3.配置application.yml。生成静态资源文件夹dist。2.配置pom.xml。4.打包生成jar包。
springboot2.X整合vue3.x+登录功能的前后端接口实现
qq_34309663的博客
03-18 1305
首先需要读者已经具备基本了解vue2.X和springboot2.X，element ui等技术 首先是登录页面的写法： <template> <div class="login_container"> <div class="login_box"> <!-- 头像区域 --> <div class="...
将前后端项目合并发布部署到云服务器的docker中
weixin_46329670的博客
06-29 1472
一、部署准备 1.ECS云服务器一台(我这里是用的阿里云服务器) 2.前后端分离项目:一个vue前端项目+一个spring后台项目 3.用到的工具 :IDEA、VScode、Navicat、Xshell、Xftp 二、 在云服务器上安装项目运行相关环境 以我这个要部署的项目为例，需要在服务器上安装: 1.java环境 2.docker 3.mysql 4.redis 以下为安装步骤 先通过xshell连接上自己的云服务器 (1)Java安装 yum -y install java-1.8.0-openjd
98分智慧社区项目源码：Vue前端与Springboot后端实战
资源摘要信息:"基于Springboot和Vue的智慧社区设计与实现源码" 智慧社区项目是一种利用现代信息技术手段，对传统社区进行数字化、智能化改造的应用。通过这个项目，用户可以体验到一个集成了最新技术的社区环境，...
大学生服务平台开发：前端Vue.js与SpringBoot后端整合
4. 前后端分离：在本平台中，前端使用Vue.js，后端使用SpringBoot，两者通过API接口进行通信。前后端分离架构使得前后端开发可以独立进行，便于团队协作和维护。 5. 源码结构：源码被划分为back和front两个目录，...
基于vue+springboot的图书馆管理系统.zip
08-05
【基于Vue+SpringBoot的图书馆管理系统】是一种常见的IT毕业设计项目，它结合了前端的Vue.js框架和后端的SpringBoot技术，构建了一个完整的Web应用系统。Vue.js是一款轻量级、高性能的前端MVVM（Model-View-...
vue项目打包
简单随风的博客
04-04 303
打包命令 npm run build 命令执行完后，会生成一个dist目录，里面包含index.html的静态文件。 注意点： 默认配置情况下，会发现文件可以打开，但是所有的js，css，img等路径有问题是指向根目录的。此时需要修改config/index.js里的assetsPublicPath的字段，设置为’./’ ...
Springboot项目与vue项目整合打包的实现方式
08-25
主要介绍了Springboot项目与vue项目整合打包的实现方式,本文通过两种方式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
spring boot+vue 的前后端分离与合并方案实例详解
08-28
主要介绍了spring boot+vue 的前后端分离与合并方案实例详解,需要的朋友可以参考下
webpack基本使用
javaxampp的博客
10-22 270
基本使用 新建项目空白目录，并运行npm init -y命令初始化包管理配置文件package.json 新建src源代码目录 在src目录下，新建index.html首页 初始化首页基本结构 执行npm i webpack webpack-cli -D 安装webpack包 在项目根目录创建名为webpack.config.js配置文件，并在该文件中初始化以下配置： ` module.exports = { mode: 'development }'` development为开发环
vue项目如何打war包
你的小可爱的博客~
09-22 1955
也可以使用其他方式打包，比如 webpack 的插件库中提供了一个叫 webpack-war-plugin 的插件，可以很便捷的做到这一点。执行如下命令打war包，由于打 war 包需要用到 jar 命令，需要事先安装好 jdk 并配置 java 环境变量。这里我们使用的是 java 命令打 war 包，所以还需要安装 java 开发环境：安装 JDK 并配置好环境变量。执行 npm run build 构建项目，会在项目根目录生成 dist 目录，构建后的文件都在此目录下。
springboot和vue项目的整合
qq_43619628的博客
01-20 2027
作为初学者，我对前后端分离一直很迷惑，在springboot和vue项目的使用时也不知道如何让这个项目跑起来。 因为springboot项目中我们使用的是html页面，是和java项目一起运行的，所以在springboot和vue项目的使用时自然会想怎么将vue融合到springboot中，其实这就是我作为一个初学者的误区。 前后端分离其实是前端是一个项目，后端是一个项目，他们两个是各自独立运行的，然后通过前端调用后端的接口来获取数据。 所以vue项目是需要单独在webstorm中运行的。而运行vue需要下
前后端项目部署
sunriseYJP的博客
01-10 184
前后端项目部署
前后端合并方法
大强博客
12-13 2035
1、前端Angular，后端Spring Boot 2、在后端pom.xml文件中增加以下内容： <build> <resources> <resource> <directory>${project.basedir}/src/main/resources</dire...
Springboot+Vue前后端分离开发--合并打包（无跨域）
acx0000的博客
07-14 4747
Springboot+Vue前后端分离开发，不分离打包流程~
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值