vue打包整合到springboot的流程

最新推荐文章于 2024-07-12 16:05:01 发布
最新推荐文章于 2024-07-12 16:05:01 发布
阅读量2.4k 收藏 12
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38503935/article/details/100101802
版权

vue端操作

主要做到5个地方的路径统一

vue的配置

路径1：在config的index.js中取消地址代理
路径2：确定assetPublicPath的值，是打包后的作为静态资源的根路径
在这里插入图片描述

npm run build 生成dist包，包下有static 和index.html

在这里插入图片描述

springboot操作

将dist下的文件和文件夹拷贝到springboot的resources的static文件夹下如图

在这里插入图片描述
此处为路径3：index.html属于第一个static下的文件即/static/index.html

路径4：修改springboot的下springApplication.properties的静态资源配置，指定静态资源为static下任何文件
在这里插入图片描述
路径5：确认路径与vue文件中index.html的路径是否匹配
在这里插入图片描述
这里所有的资源都为vue编译后的资源路径，匹配了路径4配置，匹配了路径1的“/”根路径、匹配了路径3中静态资源的实际相对路径，遵从了springboot中的静态资源调用路径。

整合是需要导入thymeleaf的包到pom中

weixin_38503935
关注
专栏目录
Vue整合到Spring Boot
Rhine
12-24 1万+
前端使用Vue，后台使用Spring Boot。
vue打包部署到springboot,通过tomcat运行
u014694915的博客
05-23 1061
让其继承一个类：SpringBootServletInitializer，并且覆盖 configure 方法，在方法中添加 return builder.sources(WarehouseSystemApplication.class);将Vue项目dist文件夹下的所有文件Copy到SpringBoot项目的resource/打包完成后项目路径下会生成一个新的文件夹dist，打包后的东西都在里面。目录，该目录下会包含不同版本的文件夹，版本号就包含在这些文件夹名称中。要么设置跨域访问（各种操作后还是不行）
SpringBoot+Vue项目的打包部署教程
最新发布
m0_74105684的博客
07-12 1991
本教程旨在帮助开发者，完成基于springboot后端项目和基于vue前端项目的打包以及服务器部署。本教程的前提是开发者已经拥有一个完整的springboot+vue的前后端分离的项目，以及一台配置好JDK和MySQL以及nginx的环境的云服务器。目标是能够将项目部署到云服务器上，并通过云服务器的IP访问项目。
将Vue项目打包并部署到Spring Boot项目中？
weixin_42611177的博客
01-13 2782
为了将Vue项目打包并部署到Spring Boot项目中，你需要进行以下步骤： 在Vue项目中使用npm run build命令打包项目。 将打包出来的dist文件夹中的内容复制到Spring Boot项目的resources/static文件夹中。 修改Spring Boot项目的配置文件，使得它能够读取静态文件。 启动Spring Boot项目，并在浏览器中访问即可。 ...
vue打包整合到springboot中
祁_z
04-25 7881
1.修改vuejs的config/index.js,在里面找到assetsPublicPath，改为/,记住，是build:{}这里的，不是上面dev:{}的 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths as...
vue打包部署到springboot中，看这篇就够了
峰晨的博客
05-23 2279
vue打包部署到springboot中
Vue项目打包到Spring Boot后部署Tomcat
sensen的博客
10-10 4531
经过几天的调试，终于将vue+springboot的前后端分离项目，整合后成功部署到服务器。本文章来记录一下这几天遇到的问题。整合后发布到Tomcat遇到的主要问题：访问项目路径404；发布到tomcat后css、js等资源文件404问题；访问项目路径为空白页
如何把vuejs打包出来的文件整合到springboot里
10-18
如何把Vue.js打包出来的文件整合到Spring Boot项目中，是前端开发与后端Java开发协作中常遇到的一个集成问题。Vue.js是一种流行的前端框架，可以让我们通过组件化的方式来构建单页应用（SPA），而Spring Boot是一个...
Springboot项目与vue项目整合打包的实现方式
08-25
Springboot项目与Vue项目整合打包的实现方式 在现代软件开发中，前端和后端项目的分离开发和集成是非常常见的。在这种情况下，我们需要在开发时将前端和后端项目分离，以便于更好地维护和更新代码。但是，在部署时...
springboot如何使用vue打包过的页面资源
08-25
Spring Boot 如何使用 Vue 打包过的页面资源 概括来说，本文主要介绍了 Spring Boot 如何使用 Vue 打包过的页面资源，通过示例代码详细介绍了整个过程。下面是对该主题的详细解释： 一、Webpack 打包 在使用 Vue ...
vue打包后整合到springboot项目、并打包成jar上传到Linux服务器运行【前后端分离开发、整体部署到Linux服务器】
weixin_47509680的博客
09-24 735
开发完前端后，执行npm run build执行打包 npm run build 默认会生成dist文件夹 里面包含了整个前端项目处理后的静态文件 进入dist文件夹 复制所有文件 进入到springboot项目中 在resources目录下新建static文件夹 将刚才从dist复制的文件粘贴到static里面 这个时候就整合到一块了 然后运行springboot项目 访问后端启动地址就能访问到项目了 最终开发完毕后上传到服务器时 先将此maven项目打包 如图所示 点..
SpringBoot整合Vue
热门推荐
Hpsyche的博客
07-14 1万+
由于前后端分离近几年已成为主流，故尝试了下Vue+SpringBoot的前后端整合。 Vue的学习可以参考：https://cn.vuejs.org/v2/guide/， 由于vue的作者尤雨溪是一个华人，所以其官网的教程什么的中文文档都很简洁明了。按照官网的所有代码基本走一遍，就能对vue有大概的了解（前提你要有js、jquery的基础）； 前端源代码 新建一个vue项目（百度很多，自行搜...
vue打包整合到springboot
qq_42126105的博客
08-10 1791
vue-cli打包整合到springboot遇到的问题。
Vue项目打包后放入SpringBoot
从入门到放弃的博客
09-09 7161
参考地址： https://cli.vuejs.org/zh/config/#publicpath https://www.cnblogs.com/kevinZhu/p/9931317.html https://www.cnblogs.com/qianjinyan/p/11001906.html 放入SpringBoot的resources后，直接在浏览器输入http://localhos...
vue+springboot打包发布
沐雨云楼
10-08 9058
前面介绍过感觉vue和springboot的几篇文章，当一个项目做完了后，就该打包发布了。本节就研究下打包发布。 vue element admin开发 vue+springboot分页交互 项目使用的技术： 开发工具: idea 前端: 使用vue element admin改造的 后端：springboot、mysql、jpa 打包手段: maven 插件 结果图： 1.打包原理 前后端分离，先看下如何分别打包。 vue前端打包，可以通过package.json里提供的命令。如：npm ru
前后端分离项目之记录VUE打包部署到Springboot
weixin_53999382的博客
09-02 1319
前后端分离项目之记录VUE打包部署到Springboot 肝了一段时间。项目终于搞定了。记录下打包过程中遇到的坑。以及脱坑的方法。 Vue项目打包 根据以往的经验，只需要修改一下output的publicpath即可。我也是先做的这一步 把原先的地址注释或者删了。就可以打包了。 而当我运行 npm run build 的时候给我报了十几个node的警告。我一看反正不是error。一点不慌。结果嘛。呵呵。springboot一启动就报错。问了度娘。答案惊人的一致。node.js版本太高。降个级就好了。可
把vuejs打包出来的文件整合到springboot里
mekave的博客
04-10 5803
把vuejs打包出来的文件整合到springboot里 1.修改vuejs的config/index.js,在里面找到assetsPublicPath，改为/dist/,记住，是build:{}这里的，不是上面dev:{}的。 build: { // Template for index.html index: path.resolve(__dirname, '../dist/in...
[Vue] 4. vue4打包并发布到springboot里面
animalcoder
03-16 1330
Vue-cli版本:4.0 1.配置vue.config.js const path = require('path') module.exports = { // 基本路径 整个文件夹在哪 //publicPath: process.env.NODE_ENV === 'production' ? '/static/' : './', publicPath: './', ...
vue打包整合到spring boot一记
qq_15054679的博客
05-30 4449
目录背景vue-cli打包之前的配置总结 背景 前段时间，根据需求，要将项目烧入到芯片，但我的擅长之处就是前后端分离开发，因此需要前端vue开发好，打包放到后端里面一起执行。那时候碰到好多貌似不可逾越的坑，今天终于可以抽出点时间，记录一下过程笔记。 vue-cli打包之前的配置 脚手架创建会生成如下的目录： 首先我们先把vue路由里的#去掉 只需在router里面加如下代码： const r...
vue怎么跟springboot整合
07-29
7. 将Vue.js项目打包为静态文件，并将其部署到Spring Boot的静态资源目录中（如src/main/resources/static）。 通过以上步骤，你就可以将Vue.js和Spring Boot进行整合，实现前后端分离的开发模式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值