vue打包部署到springboot中,看这篇就够了
创始人
2024-11-15 00:03:37
0

如果不清楚springboot中的static和templates目录可以看这篇

static和templates目录

1、问题

vue打包后部署到springboot中访问,毕竟前后端分离部署的时候要分开,多了一个服务,可以将vue打包后放在springboot中的static目录下,网上类似的博文很多,部署的时候遇到几个细节问题,如下都会一一列举出来,希望对你有帮助。

2、vue打包

vue打包部署到springboot中,路由中的mode要设置成 hash

// vue打包部署到springboot中,这里的mode需要改成 hash export default new Router({   mode: 'hash',   scrollBehavior: () => ({ y: 0 }),   routes: constantRoutes }) 

3、打包后的内容放哪里?

一般项目打包后的目录都在dist目录下, 包含static目录和一个index.html文件。

第一种
将static目录和index.html文件都放在springboot中的resources目录下;

第二种
如果不想用默认static目录,可以自己新建一个目录,注意要改配置文件,告诉springboot你的静态目录是什么。

spring.web.resources.static-locations = classpath:/staticxxx/ 

4、访问

第一种

直接访问静态文件:ip:port/index.html

第二种
带个.html看着不太好,那就先进controller,转发到index.html

ip:port/index

@GetMapping("/index") public String index() {     return "forward:/index.html"; } 

如果使用了security,注意放开静态资源权限,不然会404。

5、多个项目怎么部署

如果共用一个接口,但前端是好几个项目,都想打包扔到springboot中访问。

比如有shop项目,有user项目。

在springboot中的static目录下建两个文件夹,shop和user;各自的文件夹下放各自前端项目的包, 如果用进controller再转发的方式访问,注意 RequestMapping(“shop”) ,这里的shop和static下的shop名字要一直,不然转发后会提示404找不到静态资源,这个和转发的原理有关。

如下:

ip:port/shop/index

shop目录 RequestMapping("/shop")  @GetMapping("/index") public String index() {    return "forward:/shop/index.html"; } 

ip:port/user/index

user目录 RequestMapping("/user")  @GetMapping("/index") public String index() {    return "forward:/user/index.html"; } 

spring.web.resources.static-locations这个配置可以配置多个静态目录,上面这种情况是不是可以在resources下直接新建shop和user目录,然后把他们都标识成静态,这种方式没试,空了在研究研究。

感谢你阅读到这里,希望上面的内容对你有帮助!欢迎交流!

相关内容

热门资讯

一分钟了解!牛牛房卡怎么获得海... 微信游戏中心:海贝之城房卡在哪里买打开微信,添加客服微信【88355042】,进入游戏中心或相关小程...
分享!微信里玩炸金花房卡购买方... 微信游戏中心:炸金花房卡,添加微信【33699510】,进入游戏中心或相关小程序,搜索“微信炸金花房...
玩家攻略,金花房卡批发价天蝎大... 您好!微信天蝎大厅大厅链接获取房卡可以通过以下几种方式购买: 1.微信渠道:(天蝎大厅)大厅介绍:...
重大通报,游戏推荐牛牛房卡出售... 重大通报,游戏推荐牛牛房卡出售大众互娱/微信链接房卡从哪里购得Sa9Ix苹果iPhone 17手机即...
分享!微信群炸金花房间买房卡/... 微信游戏中心:炸金花房卡,添加微信【33699510】,进入游戏中心或相关小程序,搜索“微信炸金花房...
玩家攻略,金花房卡批发海米大厅... 您好!微信海米大厅大厅链接获取房卡可以通过以下几种方式购买: 1.微信渠道:(海米大厅)大厅介绍:...
重大通报,金花房卡专卖店新众亿... 今 日消息,新众亿/皇豪互娱房卡添加微信33549083 苹果今日发布了 iOS 16.1 正式版更...
一分钟了解!斗牛房间怎么创建的... 牛至尊房卡更多详情添加微:33549083、 2、在商城页面中选择房卡选项。 3、根据...
重大通报,金花房间怎么创建王者... 重大通报,金花房间怎么创建王者互娱/房卡链接在哪购买王者互娱是一款非常受欢迎的游戏,咨询房/卡添加微...
正版授权!牛牛房卡怎么购买江山... 您好!微信江山大厅大厅链接获取房卡可以通过以下几种方式购买: 1.微信渠道:(江山大厅)大厅介绍:...
分享!炸金花链接房卡多少钱一张... 微信游戏中心:炸金花房卡,添加微信【33699510】,进入游戏中心或相关小程序,搜索“微信炸金花房...
我来教你/金花房卡代理零售雷神... 我来教你/金花房卡代理零售雷神联盟/正规房卡找谁买雷神联盟是一款非常受欢迎的游戏,咨询房/卡添加微信...
正版授权!金花房卡制作链接旺旺... 微信游戏中心:旺旺大厅房卡在哪里买打开微信,添加客服微信【88355042】,进入游戏中心或相关小程...
头条推荐!牛牛房卡哪里有卖的火... 火狐大厅/新超圣是一款非常受欢迎的棋牌游戏,咨询房/卡添加微信:【3329006910】或QQ:33...
我来教你/金花房卡是正规的火星... 今 日消息,火星大厅/新道游房卡添加微信33549083 苹果今日发布了 iOS 16.1 正式版更...
推荐一款!牛牛房卡游戏平台加盟... 新鸿狐大厅/随意玩房卡更多详情添加微:33549083、 2、在商城页面中选择房卡选项。 ...
正规平台有哪些,金花微信链接市... 正规平台有哪些,金花微信链接市场价格表天王大厅/新天道/微信链接房卡从哪里购买天王大厅/新天道是一款...
分享!微信牛牛房卡哪里买/橘子... 微信游戏中心:斗牛房卡,添加微信【33699510】,进入游戏中心或相关小程序,搜索“微信斗牛房卡”...
一分钟了解!牛牛房卡怎么获得天... 您好!微信天启联盟大厅链接获取房卡可以通过以下几种方式购买: 1.微信渠道:(天启联盟)大厅介绍:...
头条推荐!牛牛房卡游戏代理鸿狐... 今 日消息,鸿狐大厅房卡添加微信33549083 苹果今日发布了 iOS 16.1 正式版更新,简单...