一、Ant Design Pro 打包

1.1 運行 build打包

$ npm run build

1.2 將打包生成的靜態文件拷貝到spring boot 項目中

構建打包成功之后，會在根目錄生成 dist 文件夾，然后將dist 文件夾里的的文件復制到 spring boot 項目的 /src/main/resources/static 目錄下

resources/static目錄

二、配置spring boot 項目可訪問到static目錄下的index.html

2.1 以gradle為例導入spring-boot-starter-thymeleaf

compile group: 'org.springframework.boot', name: 'spring-boot-starter-thymeleaf', version: '2.1.5.RELEASE'

2.2 在application.yml配置文件中配置

#配置html資源路徑 spring:thymeleaf:prefix: classpath:static/

2.3 在controller配置訪問地址

/*** @author Alan Chen* @description 攔截Ant Design Pro訪問路徑* @date 2019/5/24*/ @Controller public class AntDesignController {/*** 配置url通配符，攔截多個地址* @return*/@RequestMapping(value = {"/","/user","/user/**","/console","/console/**"})public String fowardIndex() {return "index";} }

注意：@Controller不是@RestController，使用@RestController會返回“index”字符串

輸入地址 http://localhost:8080 、http://localhost:8080/user/login 都會轉發到index.html，從而展示Ant Design Pro頁面

2.4 配置spring boot 項目可訪問到static目錄下的js、css

嘗試訪問http://localhost:8080/user/login時，發現現在已經能訪問到index.html了，但頁面報錯了，訪問不到js和css,錯誤頁面如下：

頁面加載js報錯

需要配置一下，讓js、css等靜態資源去static目錄下去加載

@Configuration @EnableWebMvc public class UseStaticResourceConfig implements WebMvcConfigurer {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");} }

三、整合完成

再次訪問http://localhost:8080/user/login 頁面顯示正常

login

訪問http://localhost:8080/console/commodity/product-brand 顯示后臺界面

后臺界面

四、補充2.3

關于2.3，網上有一種思路是這樣的：

Ant Design構建完成后只有一個index.html頁面和一些js、css文件，當使用browserHistory，如果直接放在Spring Boot的resource/static文件夾下面，當瀏覽器直接訪問或者在非 "/ “，”/index"路徑刷新時，由于服務器無法正確響應，會直接觸發404報錯。

解決思路：瀏覽器訪問任何404錯誤路徑都返回 /index.html文件。剩下的事情交給前端路由

@Controller public class AntDesignController implements ErrorController {@Overridepublic String getErrorPath(){return "/error";}@RequestMapping(value = "/error")public String getIndex(){return "index"; //返回index頁面} }

這種方式也能實現效果，但這種方式使得所有的錯誤請求（404）都會被攔截跳轉到index.html ,其實不太嚴謹，而且給人的感覺是，先讓其“出錯”，再來“補救”

參考官方文檔：Ant Design Pro

竟然都看到最后了，給小編點個關注吧，小編還會持續更新的，只收藏不點關注的都是在耍流氓！

總結

以上是生活随笔為你收集整理的springboot拦截请求路径_SpringBoot整合Ant Design Pro进行部署的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。