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

如果不清楚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目录,然后把他们都标识成静态,这种方式没试,空了在研究研究。

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

相关内容

热门资讯

裸辞做“一人公司”,我后悔了 去年这个时候,一位以色列程序员正在东南亚旅行。他顺手把一个在脑子里转了很久的想法做成了产品,一个让任...
南京建成国内首个Pre-6G试... 4月21日,2026全球6G技术与产业生态大会在南京开幕。全息互动技术展台前,一名远在北京的工作人员...
超梵求职受邀参加“2025抖音... 超梵求职受邀参加“2025抖音巨量引擎成人教育行业生态大会”,探讨分享优质内容传播,服务万千学员。 ...
摩托罗拉Razr 2026(R... IT之家 4 月 22 日消息,摩托罗拉宣布新一代 Razr 折叠手机将于 4 月 29 日在美国发...
库克卸任,特纳斯领航:苹果新纪... 苹果首席执行官蒂姆·库克将卸任,硬件工程主管约翰·特纳斯将接任,苹果公司今天宣布此事。 库克将在夏季...