VUE的dist文件如果集成到SpringBoot项目中

最新推荐文章于 2024-10-31 23:33:54 发布
最新推荐文章于 2024-10-31 23:33:54 发布
阅读量3k 收藏 7
点赞数 3
分类专栏： springboot 文章标签： spring boot vue.js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_48329942/article/details/126468064
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

目前流行的项目是前端端分离的，但是一些mini项目可以省略调nginx直接集成到springboot的项目中.

一、准备

前端提供的dist包，springboot 的项目

二、操作步骤

1.dist放在哪儿

dist包放在resources资源目录下，可以直接放也可以创建个文件夹放。我选择的直接放

2.配置文件修改

在这里插入图片描述

在yml文件中加入

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

3.访问路径


                

                
                
        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    



                



	

		

			

				
					
前后端分离项目VUE打包dist部署到Springboot

				
			

			

				

					yuanshiren133的博客
				

				

					05-30
					
					986
					
				

			

		

		

			
				
Vue项目打包


根据以往的经验，只需要修改一下output的publicpath即可。我也是先做的这一步





把原先的地址注释或者删了。就可以打包了。
而当我运行 npm run build 的时候给我报了十几个node的警告。我一看反正不是error。一点不慌。结果嘛。呵呵。springboot一启动就报错。问了度娘。答案惊人的一致。node.js版本太高。降个级就好了。可我觉得这不应该是解决方法的正确做法。就继续百度。终于看到一篇不太一样的。让下载stylu。然后在index.js里面配置..

			
		

	



                

            
              



	

		

			

				
					
将 vue3 项目打包后部署在 springboot 项目运行

					
最新发布

				
			

			

				

					m0_74825502的博客
				

				

					01-24
					
					950
					
				

			

		

		

			
				
服务端需要增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你 app 依赖的页面。检查前端的 vue-router 使用历史模式还是哈希模式，历史模式（HTML5 模式）需要后端额外配置，配置参考上文。在 vite.config.js（.ts） 设置开发或生产环境服务的公共基础路径（base配置项），这里不使用相对路径。检查 index.html ，查看 script 和 link 标签的地址，应该是绝对路径（不含./）

			
		

	



              


  
              

                


	

		

			

				
					
前端的dist包放到后端springboot项目下一起打包

				
			

			

				

					tiger19114844的博客
				

				

					10-31
					
					1622
					
				

			

		

		

			
				
前后端分离项目如何不分离部署

			
		

	





	

		

			

				
					
前后端分离项目之记录VUE打包部署到Springboot

				
			

			

				

					weixin_53999382的博客
				

				

					09-02
					
					1487
					
				

			

		

		

			
				
前后端分离项目之记录VUE打包部署到Springboot
肝了一段时间。项目终于搞定了。记录下打包过程中遇到的坑。以及脱坑的方法。

Vue项目打包

根据以往的经验，只需要修改一下output的publicpath即可。我也是先做的这一步

把原先的地址注释或者删了。就可以打包了。
而当我运行 npm run build 的时候给我报了十几个node的警告。我一看反正不是error。一点不慌。结果嘛。呵呵。springboot一启动就报错。问了度娘。答案惊人的一致。node.js版本太高。降个级就好了。可

			
		

	



		

			
		



	

		

			

				
					
Springboot项目与vue项目整合打包的实现方式

				
			

			

				

					08-25
				

			

		

		

			
				
主要介绍了Springboot项目与vue项目整合打包的实现方式,本文通过两种方式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

			
		

	





	

		

			

				
					
Vue打包文件dist放在SpringBoot项目下运行（正确实现全过程）（上）

				
			

			

				

					你若为我繁华，我愿成你烟花
				

				

					07-04
					
					1561
					
				

			

		

		

			
				
项目开发中，一般我们都会使用SpringBoot+Vue进行前后端开发。在部署时，会后端启动一个服务，再启动一个nginx，nginx中配置前端打包文件dist进行项目访问。实际上，我们也可以把打包好的dist目录放在SpringBoot项目下进行部署。

			
		

	





	

		

			

				
					
vue打包后的dist整合到SpringBoot中

					
热门推荐

				
			

			

				

					hanhanhanxu的博客
				

				

					06-17
					
					1万+
					
				

			

		

		

			
				
我的个人网站：
http://riun.xyz

1、修改vuejs的config/index.js,在里面找到assetsPublicPath，改为/dist/,记住，是build:{}这里的，不是上面dev:{}的。
2、执行npm run build，会出现一个dist文件夹在vuejs项目目录里。
3、把这个dist文件夹copy到springboot的resources/static/，是整个dist连文件夹一起copy过来。如下图

4、SpringBoot项目只需要parent依赖和web依赖

			
		

	





	

		

			

				
					
【最新版SpringBoot】SpringBoot集成Vue打包后的dist应该如何配置

				
			

			

				

					Guevara的博客
				

				

					12-20
					
					6260
					
				

			

		

		

			
				
概述

最近项目组后端需要一个简单的web后台，于是用Ant Design Vue撸了一个页面，嫌麻烦也就没有前后端分离了。骚操作大致归纳如下：

Vue 打包后得到 dist
	将 dist 下生成的静态文件拷贝到 SpringBoot 的 resources/static 目录下
但是过程中遇到几个问题，既然踩过坑那么久将其记录下来，防止有和我一样的同学们重复踩坑。

Vue的两种路由模式

...

			
		

	





	

		

			

				
					
前端打包项目dist导入SpringBoot打开显示不出静态页面资源

				
			

			

				

					weixin_47158583的博客
				

				

					12-12
					
					1860
					
				

			

		

		

			
				
spring.mvc.static-path-pattern 与 spring.web.resources.static-locations

			
		

	





	

		

			

				
					
如何把vuejs打包出来的文件整合到springboot里

				
			

			

				

					10-18
				

			

		

		

			
				
如何把Vue.js打包出来的文件整合到Spring Boot项目中，是前端开发与后端Java开发协作中常遇到的一个集成问题。Vue.js是一种流行的前端框架，可以让我们通过组件化的方式来构建单页应用（SPA），而Spring Boot是一个...

			
		

	





	

		

			

				
					
springboot+vue 前后端分离如何整合教程

				
			

			

				

					07-17
				

			

		

		

			
				
springboot+vue 前后端分离
整合教程额外补充
详情请查看文档资料
2020年11月12日10:25:51

			
		

	





	

		

			

				
					
将vue打包的dist部署到springboot项目中（前后端不分离）

				
			

			

				

					进击的豌豆的博客
				

				

					04-13
					
					6478
					
				

			

		

		

			
				
首先将打包好的dist文件夹放到resources下

然后在yml文件中配置
spring:
  web:
    resources:
      static-locations: "classpath:/dist"

运行程序然后访问lip:port/index.htm即可



			
		

	





	

		

			

				
					
Spring Boot 整合Vue

				
			

			

				

					zhou_Tian的博客
				

				

					08-12
					
					3148
					
				

			

		

		

			
				
整合Vue
本质就是创建一个引入了Web依赖的空白Spring Boot工程。然后将Vue工程编译后生成的dist文件夹内容放入Spring Boot工程的static文件夹内基本就好了。
1·将Vue编译生成的dist文件夹的内容，全部复制到需要代表前端代码的SpringBoot工程的resource/static文件夹下，然后启动项目即可访问。反向代理
如果Vue工程中针对某些请求需要进行反向代理、同时不想使用Nginx的话，那么可以通过Java实现
实现反向代理
引入相关依赖

配置相关代理设置

自

			
		

	





	

		

			

				
					
vue打包部署到springboot,通过tomcat运行

				
			

			

				

					u014694915的博客
				

				

					05-23
					
					1854
					
				

			

		

		

			
				
让其继承一个类：SpringBootServletInitializer，并且覆盖 configure 方法，在方法中添加 return builder.sources(WarehouseSystemApplication.class);将Vue项目dist文件夹下的所有文件Copy到SpringBoot项目的resource/打包完成后项目路径下会生成一个新的文件夹dist，打包后的东西都在里面。目录，该目录下会包含不同版本的文件夹，版本号就包含在这些文件夹名称中。要么设置跨域访问（各种操作后还是不行）

			
		

	





	

		

			

				
					
Vue项目打包至Spring Boot项目运行

				
			

			

				

					weixin_56868125的博客
				

				

					10-19
					
					2905
					
				

			

		

		

			
				
如果你的Vue.js应用程序使用了Vue Router的history模式，并且将其嵌入到Spring Boot应用程序中，你需要进行一些额外的配置，以确保前端路由正常工作。在Vue Router的history模式中，前端路由使用正常的URL，而不带有哈希标识符（#）。使用history模式时做如下配置，base为Srping Boot的根目录，默认为"/"，使用hash模式时可忽略以下配置。

			
		

	





	

		

			

				
					
Vue打包文件dist放在SpringBoot项目下运行（正确实现全过程）（下）

				
			

			

				

					你若为我繁华，我愿成你烟花
				

				

					07-11
					
					1120
					
				

			

		

		

			
				
在上一篇中，实现了Vue打包文件dist放在SpringBoot项目下运行。

			
		

	





	

		

			

				
					
Springboot配置vue静态资源包dist目录

				
			

			

				

					嘿！没错，我是李先生
				

				

					11-03
					
					1759
					
				

			

		

		

			
				
Springboot版本2.2.6.RELEASE
1 application.properties中配置
# 配置静态资源在硬盘上的位置
spring.resources.static-locations=file:\\d:\\dist\\
# 或spring.resources.static-locations=file:///d:/dist/
# spring.mvc.static-path-pattern=/** # 只有通过http://ip:port/获取的静态资源才可访问。若打开，则首页通过h

			
		

	





	

		

			

				
					
SpringBoot加载静态资源 （前端dist包）问题

				
			

			

				

					huanghui147258369的博客
				

				

					04-19
					
					5986
					
				

			

		

		

			
				
前后端分离之后，联调是个大问题，非常麻烦琐碎。如果可以将在前端的程序扔到后端运行，然后在页面点击功能直接调用自己的后台开发程序，打上断点慢慢调试，岂不美滋滋。现在教给大家一个方法。

首先需要让前端打个dist文件包，解压。解压后的 目录是这样的。





2、在后端resources目录下面新建static文件夹，与mapping目录平级。将上述文件全部扔到static目录下。如下图所示：
...

			
		

	





	

		

			

				
					
流浪动物救助网站开发：SpringBoot与Vue集成项目

				
			

			

				

					
				

			

		

		

			
				
资源摘要信息:"基于springboot+Vue的流浪动物救助网站" 该毕业设计项目是一个结合前后端技术构建的流浪动物救助网站，采用了流行的开发框架和工具，以确保系统的先进性、易用性和稳定性。下面详细介绍该项目的技术...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 7

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值