为了早点体验到 ant design pro 的页面,注释了部分配置,显示出了 welcome 页面。可是当你刷新页面时候,到你面前的就是 404 。这里,就要先解决 404 问题。
Ant Design Pro 使用的 Umi 支持两种路由方式:browserHistory
和 hashHistory
。默认就是 browserHistory
。这样漂亮好看。而默认就是这种方式。具体请看:
虽然这种方式漂亮好看。可对于解析认识是个问题。需要服务端进行处理。因为只使用过 nginx,这里就说下 nginx 下的解决方法。
找到对应的 nginx 的配置文件,并修改文件。
如果 ant design pro 编译后的文件直接在根目录下,可以在配置文件中增加
location / {
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
如果 ant design pro 编译后的文件不再根目录下(比如在 dashboard 下),可以在配置文件中增加
location /dashboard {
index index.html index.htm;
try_files $uri $uri/ /dashboard/index.html;
}
然后保存重启 nginx ,再刷新页面,发现不再是 404 了。
nginx -s reload
homestead 中,虚拟机里的配置文件在 /etc/nginx/sites-available/ 下,可以单独修改,重启。但这样重启后,会再生。清理的脚步在本地的 Homestead
的 scripts/clear-nginx.sh
中。如果单独对某个域名处理,最好在本地的 scripts/site-types/
下新建配置,然后 Homestead.yml 文件中,对具体域名指定配置。
多的话就不说了,具体还是 nginx 的修改配置。 至于 nginx 的 try_files 是什么意思了,可以了解下。
try_files 的核心目的就是替代。比如,
location /dashboard {
index index.html index.htm;
try_files $uri $uri/ /index.php?q=$uri&$args;
}
以 根目录(对应站点的根目录)下的 dashboard 目录为参照,先查找第一个节点,看文件是否存在,如果不存在再看文件夹(有斜杠)是否存在,如果再不存在,就指向到第三个参数。
比如具体的 url 是这样的。
https://www.mlxiu.com/dashboard/love
它会先检查 love 这个文件是否存在,如果不存在 love 这个文件则检查 love 这个文件夹。当然,文件的后缀,上边已先列出。