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

static和templates目錄

1、問題

vue打包后部署到springboot中訪問，畢竟前后端分離部署的時候要分開，多了一個服務(wù)，可以將vue打包后放在springboot中的static目錄下，網(wǎng)上類似的博文很多，部署的時候遇到幾個細(xì)節(jié)問題，如下都會一一列舉出來，希望對你有幫助。

2、vue打包

vue打包部署到springboot中，路由中的mode要設(shè)置成 hash

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

3、打包后的內(nèi)容放哪里？

一般項目打包后的目錄都在dist目錄下， 包含static目錄和一個index.html文件。

第一種將static目錄和index.html文件都放在springboot中的resources目錄下；

第二種如果不想用默認(rèn)static目錄，可以自己新建一個目錄，注意要改配置文件，告訴springboot你的靜態(tài)目錄是什么。

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

4、訪問

第一種

直接訪問靜態(tài)文件：ip:port/index.html

第二種帶個.html看著不太好，那就先進controller，轉(zhuǎn)發(fā)到index.html

ip:port/index

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

如果使用了security，注意放開靜態(tài)資源權(quán)限，不然會404。

5、多個項目怎么部署

如果共用一個接口，但前端是好幾個項目，都想打包扔到springboot中訪問。

比如有shop項目，有user項目。

在springboot中的static目錄下建兩個文件夾，shop和user；各自的文件夾下放各自前端項目的包， 如果用進controller再轉(zhuǎn)發(fā)的方式訪問，注意 RequestMapping(“shop”) ，這里的shop和static下的shop名字要一直，不然轉(zhuǎn)發(fā)后會提示404找不到靜態(tài)資源，這個和轉(zhuǎn)發(fā)的原理有關(guān)。

如下：

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這個配置可以配置多個靜態(tài)目錄，上面這種情況是不是可以在resources下直接新建shop和user目錄，然后把他們都標(biāo)識成靜態(tài)，這種方式?jīng)]試，空了在研究研究。

到此這篇關(guān)于vue打包部署到springboot的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue打包部署到springboot內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論