由於特殊原因，所以臨危受命將vue整合到springboot的專案中，終於在忙活了一天之後成功搞定，下面就分享一下這次的整合過程：

 1建立springboot和vue專案

           springboot以及vue專案都已經由前後端同事分別開發完成，這裡就不介紹具體的建立過程了；

2.打包vue專案

vue使用了vue-cli，因此目錄結構如下

1） 修改config下的index.js

// Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'assets',
    assetsPublicPath: '/',
 

其中最後2句是訪問靜態資源的路徑，例如上圖的程式碼訪問路徑就是localhost:8080/assets/xxxx；

2）打包vue

npm run build

最後出現 Build complete.則是打包成功

這時根目錄下會出現dist資料夾，這個就是打包後的檔案

3.配置springboot專案

1）將vue放入springboot專案中

將剛才生成的dist資料夾中的index.html放入到templates資料夾中

將assets中的靜態資源放入到上圖的assets中

2）修改springboot的靜態資源引用路徑

registry.addResourceHandler("/assets/**").addResourceLocations("classpath:/assets/").setCacheControl(CacheControl.noCache());
 

3）寫一個跳轉的介面

@RequestMapping("/")
public String index(Model model, User user) {
	
    return "index";
}

這樣輸入localhost:8080即可執行springboot專案中的vue了。