springboot和vue結合的方案網絡上的主要有以下兩種：

1. 【不推薦】在html中直接使用script標簽引入vue和一些常用的組件，這種方式和以前傳統的開發是一樣的，只是可以很爽的使用vue的雙向數據綁定，這種方式只適合于普通的全棧開發。

2.【推薦】使用vue官方的腳手架創建單獨的前端工程項目，做到和后端完全獨立開發和部署，后端單獨部署一個純restful的服務，而前端直接采用nginx來部署，這種稱為完全的前后端分離架構開發模式，但是在分離中有很多api權限的問題需要解決，包括部署后的vue router路由需要在nginx中配置rewrite規則。這種前后端完全分離的架構也是目前互聯網公司所采用的，后端服務器不再需要處理靜態資源，也能減少后端服務器一些壓力。

一、為什么做前后端分離開發合并

在傳統行業中很多是以項目思想來主導的，而不是產品，一個項目會賣給很多的客戶，并且部署到客戶本地的機房里。在一些傳統行業里面，部署實施人員的技術無法和互聯網公司的運維團隊相比，由于各種不定的環境也無法做到自動構建，容器化部署等。因此在這種情況下盡量減少部署時的服務軟件需求，打出的包數量也盡量少。針對這種情況這里采用的在開發中做到前后端獨立開發，整個開發方式和上面提到的第二種方式是相同的，但是在后端springboot打包發布時將前端的構建輸出一起打入，最后只需部署springboot的項目即可，無需再安裝nginx服務器。

二、springboot和vue整合的關鍵操作

實際上本文中這種前后端分離的開發，前端開發好后將build構建好的dist下static中的文件拷貝到springboot的resource的static下，index.html則直接拷貝到springboot的resource的static下。下面是示例圖：

vue前端項目

springboot項目：

上面這是最簡單的合并方式，但是如果作為工程級的項目開發，并不推薦使用手工合并，也不推薦將前端代碼構建后提交到springboot的resouce下，好的方式應該是保持前后端完全獨立開發代碼，項目代碼互不影響，借助jenkins這樣的構建工具在構建springboot時觸發前端構建并編寫自動化腳本將前端webpack構建好的資源拷貝到springboot下再進行jar的打包，最后就得到了一個完全包含前后端的springboot項目了。

三、整合的核心問題處理

通過上面的整合后會出現兩個比較大的問題：

1. 無法正常訪問靜態資源 。

2. vue router路由的路徑無法正常解析 。

解決第一個問題，我們必須重新指定springboot的靜態資源處理前綴，代碼：

@Configuration
public class SpringWebMvcConfig extends WebMvcConfigurerAdapter {
  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    super.addResourceHandlers(registry);
  }
}