前言
最近在部署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>