快捷導(dǎo)航

vue打包部署到springboot的實(shí)現(xiàn)示例

更新時(shí)間：2024年07月09日 11:34:43 作者：峰晨樸樸

項(xiàng)目開(kāi)發(fā)中,一般我們都會(huì)使用SpringBoot+Vue進(jìn)行前后端開(kāi)發(fā),本文主要介紹了vue打包部署到springboot的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下

1、問(wèn)題

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

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)容放哪里？

一般項(xiàng)目打包后的目錄都在dist目錄下，包含static目錄和一個(gè)index.html文件。

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

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

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

4、訪問(wèn)

第一種

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

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

ip:port/index

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

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

5、多個(gè)項(xiàng)目怎么部署

如果共用一個(gè)接口，但前端是好幾個(gè)項(xiàng)目，都想打包扔到springboot中訪問(wèn)。

比如有shop項(xiàng)目，有user項(xiàng)目。

在springboot中的static目錄下建兩個(gè)文件夾，shop和user；各自的文件夾下放各自前端項(xiàng)目的包，如果用進(jìn)controller再轉(zhuǎn)發(fā)的方式訪問(wèn)，注意 RequestMapping(“shop”) ，這里的shop和static下的shop名字要一直，不然轉(zhuǎn)發(fā)后會(huì)提示404找不到靜態(tài)資源，這個(gè)和轉(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這個(gè)配置可以配置多個(gè)靜態(tài)目錄，上面這種情況是不是可以在resources下直接新建shop和user目錄，然后把他們都標(biāo)識(shí)成靜態(tài)，這種方式?jīng)]試，空了在研究研究。

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

您可能感興趣的文章: