springboot和vue結(jié)合的方案網(wǎng)絡上的主要有以下兩種：

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：主機域名、虛擬主機、營銷軟件、網(wǎng)站建設(shè)、南皮網(wǎng)站維護、網(wǎng)站推廣。

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

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

一、為什么做前后端分離開發(fā)合并

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

二、springboot和vue整合的關(guān)鍵操作

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

vue前端項目

springboot項目：

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

三、整合的核心問題處理

通過上面的整合后會出現(xiàn)兩個比較大的問題：

1. 無法正常訪問靜態(tài)資源 。

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

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

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

標題名稱：springboot+vue的前后端分離與合并方案實例詳解-創(chuàng)新互聯(lián)
文章來源：http://weahome.cn/article/ddgdgi.html