vue打包部署到springboot的实现示例

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

到此这篇关于vue打包部署到springboot的实现示例的文章就介绍到这了,更多相关vue打包部署到springboot内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！