springboot專案整合vue

2021-08-22 08:36:05 字數 1253 閱讀 8113

由於特殊原因,所以臨危受命將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/***x;

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)寫乙個跳轉的介面

public string index(model model, user user)

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

SpringBoot專案整合Swagger2

swagger 是最流行的 api 開發工具,它遵循 openapi specification openapi 規範,也簡稱 oas swagger 可以貫穿於整個 api 生態,如 api 的設計 編寫 api 文件 測試和部署。swagger 是一種通用的,和程式語言無關的 api 描述規範。...

springboot專案整合shiro

pom.xml配置檔案中,新增shiro org.apache.shiro shiro spring boot web starter 1.4.0 com.github.theborakompanioni thymeleaf extras shiro 2.0.0 org.springframewor...

SpringBoot專案整合Swagger UI

參考文章 mybatis plus自動生成實體類 包含swagger註解 因為1中是mybatis的 生成器,另外找了mybatis plus的 在pom.xml中新增依賴 配置swaggerconfig檔案 configuration 配置 enableswagger2 開啟swagger pub...