vue+springboot前后端分离开发, 将vue编译后的静态资源融入springboot,只需要启动一个后端jar就可以了

最新推荐文章于 2023-04-19 00:00:00 发布
原创 最新推荐文章于 2023-04-19 00:00:00 发布 · 3.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue+springboot前后端分离开发 # 将vue编译后的静态资源

本文详细介绍如何将Vue前端项目与SpringBoot后端项目进行整合，实现前后端分离开发并最终融合。通过此方法，只需启动SpringBoot即可使用Vue编译后的代码，同时介绍了访问前端页面的正确路径。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
编译后dist的vue
在这里插入图片描述
前端的工作做完了,然后是springboot的配置

在这里插入图片描述
将编译后的资源加载到springboot里, 这样只需要启动springboot就可以使用vue编译后的代码, 做到前后端分离开发, 最终融入springboot里

注意,

该方法使用后进入前端页面则要改用springboot的静态资源路径

端口使用的是springboot的端口 win本地启动整合后的项目, 则

进入vue前端页面地址为:

pc端为

localhost:8551/tasty_mgr/view/pc/index.html

h5端为

localhost:8551/tasty_mgr/view/mobile/index.html

springboot获取静态图片路径_Springboot中如何访问静态资源
weixin_35070925的博客
01-15 2602
1. application中需要先行的两个配置项1.1 spring.mvc.static-path-pattern这个配置项是告诉springboot，应该以什么样的方式去寻找资源。默认配置为 /* 。换句话说，只有静态资源满足什么样的匹配条件，Spring Boot才会处理静态资源请求比如下面这个配置spring.mvc.static-path-pattern=/soul/*后记：多次使用后...
宝塔部署springboot vue ruoyi前后端分离项目,分离lib、resources
sontin的专栏
07-31 725
宝塔部署springboot vue3 ruoyi前后端分离项目,分离lib、resources， 如果是拆包编译的需要加入，注意位置和空格,一...。3) 项目JDK, 一定要确认好项目所支持的版本,否则启动失败。a) 如果项目是打成一个jar包的,不需要做修改,直接用。c) 前端根目录: 前面"文件"创建好的vue界面目录。2) 点击对应"项目名称"->"配置文件"1) 点击对应"项目名称"->"伪静态"但是如果是 拆包编译的...
如何把vuejs打包出来的文件整合到springboot里
10-18
主要介绍了如何把vuejs打包出来的文件整合到springboot里,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
把vue打包到springboot的jar下运行
yaovirus的专栏
02-25 2448
业务场景： 1github下载的项目，前后端分离，前端一个项目，后端一个项目，前端是vue，后端是springboot。 2由于服务器权限问题，不允许讲vue放到nginx下 解决办法 1把vue编译后的静态文件放到springboot项目的resources下面，即将index.html放到resources/templates下面，将static下面的文件放到resources/static下 2springboot打包jar，运行成功 3出现问题，页面打不开，查看问题，请求不到static
Spring Boot 整合Vue
zhou_Tian的博客
08-12 3168
整合Vue 本质就是创建一个引入了Web依赖的空白Spring Boot工程。然后将Vue工程编译后生成的dist文件夹内容放入Spring Boot工程的static文件夹内基本就好了。 1·将Vue编译生成的dist文件夹的内容，全部复制到需要代表前端代码的SpringBoot工程的resource/static文件夹下，然后启动项目即可访问。反向代理 如果Vue工程中针对某些请求需要进行反向代理、同时不想使用Nginx的话，那么可以通过Java实现 实现反向代理 引入相关依赖 配置相关代理设置 自
springboot + vue 前后端分离项目部署及服务器配置
qq_40572023的博客
10-26 1983
springboot + vue 前后端分离项目部署及服务器配置 原文 问题1：服务器安装jdk 1.jdk下载 下载链接：jdk百度网盘下载（点击跳转） 提取码：gy61 2.在xshell 首先执行 yum install lrzsz ，安装过程中一路 ‘y’ 注：安装lrzsz（zmodem） 对于CentOS系统：yum install lrzsz 对于debian系统：apt-get install lrzsz 安装完成后就可以使用SecureCRT的zmodem功能了。 3.进入usr 目录 ,
房产销售平台 JAVA高分毕业设计 Vue.JS+SpringBoot前后端分离项目.zip
10-12
本篇文章将详细介绍一个基于Java技术栈，结合Vue.js前端框架的房产销售平台项目，该项目利用Spring Boot作为后端框架，实现了前后端分离。 首先，我们来探讨一下什么是前后端分离。前后端分离是一种开发模式，它将...
springboot+vue前后端分离养老院管理系统.zip
最新发布
04-29
在部署方面，由于是前后端分离的系统，前端Vue项目可以编译打包成静态文件部署在Web服务器上，后端Spring Boot应用可以打包为可执行的jar文件或war文件，部署在Java应用服务器上。 最后，整个系统的开发流程也需要...
在线考试系统，springboot+vue前后端分离的一个项目，记录自己毕业设计完成的情况.zip
01-03
【标题】"在线考试系统，springboot+vue前后端分离的一个项目，记录自己毕业设计完成的情况.zip" 提供的关键知识点主要包括“在线考试系统”、“SpringBoot”和“Vue.js”的结合应用，以及“前后端分离”的开发模式...
Springboot+vue的校园社团管理系统（有报告） Javaee项目，springboot vue前后端分离项目
04-13
但本项目使用的是Vue.js，因此需要配置SpringBoot以支持静态资源的处理，允许Vue.js的编译结果在服务器上运行。 五、数据库管理与Spring Data JPA Spring Data JPA是Spring的一个模块，用于简化JPA（Java ...
springboot如何使用vue打包过的页面资源
08-25
主要介绍了springboot如何使用vue打包过的页面资源,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Spring boot 整合vue
weixin_45341113的博客
04-07 421
1.场景 (1)原先我们的的项目是前后端分离的项目,前端是vue+elementUI, 后端是spring boot开发的. (2)开发完成后,后端部署在tomcat,前端部署在nginx,完美运行 (3)为了方便部署,项目经理要求把前端项目和后端项目只打一个包 2.步骤 1.将前端项目用npm run build打包，会生成一个dist文件 2.后端项目是maven管理的后端项目,...
springboot整合前端静态资源及VUE项目，打包成jar
yongshenghuang的博客
10-09 8654
由于springboot内置了tomcat等容器，因此可以将前端程序打成jar包，减少多安装tomcat工作，springboot整合前端静态资源及VUE项目主要步骤如下： 一、pom build增加路径映射配置 <build> <resources> <resource> <directory>${...
springBoot和vue后台整合
junner_hu的博客
03-15 513
springBoot和vue后台整合 前言：原来部署项目结构都是api.xxx.com;backend.xxx.com;这样的两个域名，其中api是请求接口，backend是后台入口，这是是入口，也就是将vue build之后的静态资源直接放到backend后面，相当于backend只是一个纯静态网站，与小程序，APP、H5等共同访问api提供的数据接口，通过带的不同请求参数来判断是哪个端；日前，公司要求把不同接口拆分出来，做成类似mp.xxx.com、h5.xxx.com的按应用场景来区分的接口形式，在
Vue项目部署到SpringBoot工程下
热门推荐
dongzhensong的博客
05-26 2万+
目录1.修改编译设置2. 编译3. 部署 首先, 从前后端分离的角度来说, 不建议将编译后的vue工程放到SpringBoot工程目录下,部署到Tomcat, 因为这有点违背前后端分离的设计. 建议将其部署到Nginx下. 即后端工程与前端工程分开部署. 1.修改编译设置 找到vue工程的 config/prod.env.js 文件(如果没有该文件可不处理), 修改 BASE_API 为正式环...
SpringBoot访问静态资源和jar外部静态资源，部署前端打包后的vue项目放入静态资源里
蚂蚁舞
04-19 8662
记录一下使用SpringBoot访问静态资源和SpringBoot打包之后的jar外部静态资源，部署前端打包后的vue项目放入静态资源里。
Spring Boot整合Vue，解决静态资源映射，页面刷新失效，路径配置等问题
godelgnis的博客
05-01 1万+
本博文属于本人原创，请尊重本人的劳动成果，如需转载，请标明出处并附上原文链接，谢谢。 文章目录前言关于Vue中图片打包的问题（可跳过）准备工作问题描述静态资源访问设置首页出错页面处理另外的处理方式结束 前言         为了完成学校的课程设计,我使用了Spring Boot和Vue尝试进行开发并且完成了，由于前...
Springboot+Vue项目打包成jar的配置
白也白
07-24 3389
Springboot+Vue项目打包成jar的配置
spring boot+vue前后端项目的分离（我的第一个前后端分离项目）
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
12-22 1万+
1、前端vue的搭建 建立项目的过程略 需要注意的几点 1、在建立项目的时候、可以选择路由选项。后续就不需要再次安装路由。 2、安装axios在这里插入代码片
基于Vue和SpringBoot的前后端分离项目开发与部署
以上这些知识点都是围绕着“vue + springboot前后端分离项目”这一主题展开的，涵盖了从前端开发到后端部署的各个环节。开发者通过对这些知识点的掌握和应用，能够构建出稳定可靠、高效易维护的Web应用。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值