antd pro部署後刷新404解決方案

前言

最近在部署antdPro開發的前後端分離程序時，發現在本地正常，部署至服務器後刷新則出現404，原因在於antd Pro 支持兩種路由模式，默認模式爲 browserHistory，這種模式比較優雅，而對應的 hash 模式中間多了 # ，顯得不那麼好看。

https://cdn.com/users/123 # browserHistory
https://cdn.com/#/users/123 #hashHistory

修改方式

在 config/config.js 中修改下面的配置即可。

export default {
	...
	history: 'hash',// 默認是 browser
}

解決方案

官網不包括 Apache 的解決方案，在這裏做一下總結。主要是使其每次都訪問 index.html 頁面。

Nginx 部署

這裏直接貼出來官方的配置，暫時沒用 nginx 。

server {
    listen 80;
   	...
    location / {
        # 用於配合 browserHistory使用
        try_files $uri $uri/ /index.html;

        # 如果有資源，建議使用 https + http2，配合按需加載可以獲得更好的體驗
        # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;
    }
}

Apache 部署

與 Nginx 相同，配置如下：

<Directory "C:\wwwroot\redbook.qiandaoba.cn">
		Options FollowSymLinks ExecCGI
		AllowOverride All
		Require all granted
		DirectoryIndex index.html
		# 用於配合 browserHistory使用	
		FallbackResource /index.html
	</Directory>