vue 放入springboot 项目

最新推荐文章于 2025-02-22 13:31:59 发布
最新推荐文章于 2025-02-22 13:31:59 发布
阅读量2.2k 收藏 10
点赞数
分类专栏： java vue 文章标签： vue.js spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39599999/article/details/127196166
版权
本文详细介绍如何将Vue项目与Spring Boot项目进行集成部署。主要包括：1. 将Vue dist目录复制到Spring Boot项目的resource目录；2. 在Spring Boot application配置文件中设置静态资源路径；3. Vue路由配置为hash模式；4. 可选配置Vue应用的默认跳转URL。

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

1, 组合打包

把dist文件目录整个复制到 springboot项目的resource目录

在这里插入图片描述

2, 在springboot项目的application文件中配置

spring:
  web:
    resources:
      static-locations: "classpath:/dist"

3, 配置vue项目退出的跳转url (可能不需要)

 location.href = '/index.html';

4, 配置vue项目中router目录下 index.js的

history: createWebHashHistory(),

在这里插入图片描述

SpringBoot+vue项目实战（一）
jiuxiang1的博客
02-19 1万+
SpringBoot+vue入门SpringBoot+Vue项目实战一：vue开发步骤一：安装node.js步骤二：安装镜像步骤三：安装Vue步骤四：安装全局vue-cli脚手架步骤五：检查Vue是否安装成功步骤六：创建一个基于 webpack 模板的新项目（可略）步骤七:启动项目，访问项目步骤一：先择file,点击open导入我们的项目步骤二：引入vue插件步骤三：新建两个vue文件步骤四：启动项目二：SpringBoot项目开发步骤1：新建SpringBoot项目步骤2：springboot的crud步
【学习笔记之vue】vue项目放在springboot项目里后，刷新页面会显示whitelabel error page
IsQiya Bug Worlde
04-22 1183
当你在Spring Boot项目中嵌入Vue项目，并且刷新页面时遇到了“Whitelabel Error Page”，这通常意味着Spring Boot后端没有正确地处理前端路由的请求。Vue.js是一个前端框架，它使用客户端路由，而Spring Boot是一个后端框架，它通常处理服务器端的路由。通过检查上述方面并进行适当的调整，你应该能够解决在Spring Boot项目中嵌入Vue项目时遇到的“Whitelabel Error Page”问题。
spring boot项目和vue一起放在tomcat部署
11-13
spring boot项目和vue一起放在tomcat部署,spring boot项目和vue一起放在tomcat部署
vue打包部署到springboot中，看这篇就够了
峰晨的博客
05-23 5744
vue打包部署到springboot中
将 Vue 项目打包后部署到 Spring Boot 项目中的全面指南
最新发布
太渊
02-22 2686
本文将指导你如何将一个基于 Vue 3 的前端项目打包后，部署到一个基于 Spring Boot 的后端项目中。通过这种方式，你可以将前后端项目集成在一个应用中，简化部署流程。通过以上步骤，你可以将 Vue 项目打包后部署到 Spring Boot 项目中，实现前后端项目的集成。这种方式简化了部署流程，但也带来了一些挑战，如资源路径配置和静态资源管理。
Vue项目部署到SpringBoot工程下
热门推荐
dongzhensong的博客
05-26 2万+
目录1.修改编译设置2. 编译3. 部署 首先, 从前后端分离的角度来说, 不建议将编译后的vue工程放到SpringBoot工程目录下,部署到Tomcat, 因为这有点违背前后端分离的设计. 建议将其部署到Nginx下. 即后端工程与前端工程分开部署. 1.修改编译设置 找到vue工程的 config/prod.env.js 文件(如果没有该文件可不处理), 修改 BASE_API 为正式环...
SpringBoot整合Vue部署
m0_61083409的博客
04-08 4616
SpringBoot整合Vue部署 说明 Vue项目打包 SpringBoot项目 说明 由于开发采用的前后端分离开发，所以前端用了Vue。后端用了Springboot，然而在开发完成以后。需要将前后端放入到一起去部署，所以想到了将Vue打包后的项目部署到springboot项目中 Vue项目打包 npm run build #由于我用的是Vue-element-Admin模板，打包命令是 npm run build:prod SpringBoot项目 在.yml配置文件中设置静态资源路径
springboot整合vue，将vue项目整合到springboot项目中
m0_54140659的博客
12-15 4848
将vue项目打包后，与springboot项目整合。使用springboot中的thymeleaf模板引擎
SpringBoot+vue项目初级（一）
hillniu的博客
09-05 2453
在data函数中，使用created方法，通过this.$axios.get来访问后台，参数就是我们要访问的接口路径，then后面跟的是回调函数，resp这个可以任意填写，代表的是get方法拿到的data数据，先将this赋给一个对象是为了在回调函数中使用，否则直接使用this，拿到的是当前回调函数的这个对象。5.将application.properties删掉，这里我们用的是application.yml文件，这个更清晰，内容很简单，只配置了一些数据库链接，以及执行脚本的输出控制。
将 vue3 项目打包后部署在 springboot 项目运行
m0_74825502的博客
01-24 947
服务端需要增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你 app 依赖的页面。检查前端的 vue-router 使用历史模式还是哈希模式，历史模式（HTML5 模式）需要后端额外配置，配置参考上文。在 vite.config.js（.ts） 设置开发或生产环境服务的公共基础路径（base配置项），这里不使用相对路径。检查 index.html ，查看 script 和 link 标签的地址，应该是绝对路径（不含./）
如何把vuejs打包出来的文件整合到springboot里
10-18
如何把Vue.js打包出来的文件整合到Spring Boot项目中，是前端开发与后端Java开发协作中常遇到的一个集成问题。Vue.js是一种流行的前端框架，可以让我们通过组件化的方式来构建单页应用（SPA），而Spring Boot是一个...
vue项目整合到springboot上
LKCNFV的博客
10-24 1192
1. 在项目的根目录运行npm run serve进行打包，打包完后在此目录下会生成一个dist文件夹 2. 将此dist文件夹移到你springboot项目当中的static文件夹下面 修改index.html里的js以及css的访问路径，以便项目在启动的时候能够访问到。比如在application.properties里，你设置的后端项目名是server.servlet.context-path=/aiotv_view，那么在index里，就修改成/项目名/dist，意思是在该项目的静态资源目录下
vue+springboot项目部署
qq_44660367的博客
10-02 395
Vue项目部署 1、压缩项目 压缩好后传到服务器上并解压，传输压缩包防止文件损坏。 2、安装前端项目依赖 npm install --unsafe-perm --registry=https://registry.npm.taobao.org 3、打包项目 npm run build 同时也可以打生产环境包以及运行环境包，如果报错的话，看下自己的package.json文件中是不是没有配置该打包方式。 打包完成后会产生一个dist文件夹，将文件夹 复制到上层目录一份，防止丢失。 4、配置nginx ng
vue打包部署到springboot,通过tomcat运行
u014694915的博客
05-23 1839
让其继承一个类：SpringBootServletInitializer，并且覆盖 configure 方法，在方法中添加 return builder.sources(WarehouseSystemApplication.class);将Vue项目dist文件夹下的所有文件Copy到SpringBoot项目的resource/打包完成后项目路径下会生成一个新的文件夹dist，打包后的东西都在里面。目录，该目录下会包含不同版本的文件夹，版本号就包含在这些文件夹名称中。要么设置跨域访问（各种操作后还是不行）
将Vue项目打包并部署到Spring Boot项目中？
weixin_42611177的博客
01-13 2923
为了将Vue项目打包并部署到Spring Boot项目中，你需要进行以下步骤： 在Vue项目中使用npm run build命令打包项目。 将打包出来的dist文件夹中的内容复制到Spring Boot项目的resources/static文件夹中。 修改Spring Boot项目的配置文件，使得它能够读取静态文件。 启动Spring Boot项目，并在浏览器中访问即可。 ...
springboot + vue_springboot项目集成vue
weixin_39633276的博客
11-26 557
由于特殊原因，所以临危受命将vue集成到springboot的项目中，终于在忙活了一天之后成功搞定，下面就分享一下这次的集成过程：1.创建springboot和vue项目springboot以及vue项目都已经由前后端同事分别开发完成，这里就不介绍具体的创建过程了；2.打包vue项目vue使用了vue-cli，因此目录结构如下1) 修改config下的index.js其中最后2句是访问静...
Vue项目部署到SpringBoot项目的方法
IT利刃出鞘的博客
08-13 1044
本文介绍如何将Vue项目部署到SpringBoot项目。
怎么部署vue+springboot项目
04-24
您好，感谢您的提问。关于部署vue和springboot项目的具体步骤，我可以给您一些简单的概括。 首先，您需要将vue项目的打包文件放入springboot项目的静态资源文件夹中。在springboot项目的配置文件中配置静态资源的映射即可。 其次，您需要在springboot项目中编写控制器类，用于处理前端请求，并返回对应的数据或者页面。您也可以使用SpringBoot提供的模板引擎来渲染页面。 最后，您需要考虑服务器的环境以及如何部署您的项目。您可以使用Docker等工具来进行部署。 希望以上信息对您有所帮助，如果您有其他问题，可以随时向我提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值