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

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