一才顿、Ant Design Pro 打包
1.1 運(yùn)行 build打包
$ npm run build
1.2 將打包生成的靜態(tài)文件拷貝到spring boot 項(xiàng)目中
構(gòu)建打包成功之后花沉，會(huì)在根目錄生成 dist 文件夾，然后將dist 文件夾里的的文件復(fù)制到 spring boot 項(xiàng)目的 /src/main/resources/static 目錄下
二困介、配置spring boot 項(xiàng)目可訪問(wèn)到static目錄下的index.html
2.1 以gradle為例導(dǎo)入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配置訪問(wèn)地址
/**
* @author Alan Chen
* @description 攔截Ant Design Pro訪問(wèn)路徑
* @date 2019/5/24
*/
@Controller
public class AntDesignController {
/**
* 配置url通配符顶滩，攔截多個(gè)地址
* @return
*/
@RequestMapping(value = {
"/",
"/user",
"/user/**",
"/console",
"/console/**"
})
public String fowardIndex() {
return "index";
}
}
注意：@Controller不是@RestController，使用@RestController會(huì)返回“index”字符串
輸入地址 http://localhost:8080 田篇、http://localhost:8080/user/login 都會(huì)轉(zhuǎn)發(fā)到index.html，從而展示Ant Design Pro頁(yè)面
2.4 配置spring boot 項(xiàng)目可訪問(wèn)到static目錄下的js封断、css
嘗試訪問(wèn)http://localhost:8080/user/login時(shí)斯辰，發(fā)現(xiàn)現(xiàn)在已經(jīng)能訪問(wèn)到index.html了，但頁(yè)面報(bào)錯(cuò)了坡疼，訪問(wèn)不到j(luò)s和css,錯(cuò)誤頁(yè)面如下：
需要配置一下，讓js衣陶、css等靜態(tài)資源去static目錄下去加載
@Configuration
@EnableWebMvc
public class UseStaticResourceConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
}
}
三柄瑰、整合完成
再次訪問(wèn)http://localhost:8080/user/login 頁(yè)面顯示正常
訪問(wèn)http://localhost:8080/console/commodity/product-brand 顯示后臺(tái)界面
四闸氮、補(bǔ)充2.3
關(guān)于2.3，網(wǎng)上有一種思路是這樣的：
Ant Design構(gòu)建完成后只有一個(gè)index.html頁(yè)面和一些js教沾、css文件蒲跨，當(dāng)使用browserHistory，如果直接放在Spring Boot的resource/static文件夾下面授翻，當(dāng)瀏覽器直接訪問(wèn)或者在非 "/ “或悲，”/index"路徑刷新時(shí)，由于服務(wù)器無(wú)法正確響應(yīng)堪唐，會(huì)直接觸發(fā)404報(bào)錯(cuò)巡语。
解決思路：瀏覽器訪問(wèn)任何404錯(cuò)誤路徑都返回 /index.html文件。剩下的事情交給前端路由
@Controller
public class AntDesignController implements ErrorController {
@Override
public String getErrorPath(){
return "/error";
}
@RequestMapping(value = "/error")
public String getIndex(){
return "index"; //返回index頁(yè)面
}
}
這種方式也能實(shí)現(xiàn)效果淮菠，但這種方式使得所有的錯(cuò)誤請(qǐng)求（404）都會(huì)被攔截跳轉(zhuǎn)到index.html ,其實(shí)不太嚴(yán)謹(jǐn)男公，而且給人的感覺(jué)是，先讓其“出錯(cuò)”合陵，再來(lái)“補(bǔ)救”
參考官方文檔：Ant Design Pro
