Umi&React打包部署到非根目录及刷新报错404的问题解决

在开发中可能一个项目包含多个子项目，如前端项目和后台管理的项目放在同一个服务器目录中。

前端项目地址是 www.w3h5.com ，后台管理项目地址是 www.w3h5.com/admin 。

这样会遇到一个问题，本地开发是好的，部署后就没反应了，页面无法正常打开，而且没有报错？

没有报错！这是应用部署在非根路径的典型现象。为啥会有这个问题？因为路由没有匹配上，比如你把应用部署在 /xxx/ 下，然后访问 /xxx/hello，而代码里匹配的是 /hello，那就匹配不上了，而又没有定义 fallback 的路由，比如 404，那就会显示空白页。

可通过配置 base 解决，找到配置文件 /.umirc.ts 添加如下配置。

export default defineConfig({
  base: '/path/ourAppRoot',
  // ...
};

也会遇到首页可以打开，比较输入路由地址就打不开了，在首页点击菜单可以访问，但是刷新就又不行了。

这时需要修改一下服务器的配置，以 Nginx 为例：（Nginx配置文件位置为/etc/nginx/nginx.conf）

server {
  # ...

  location / {
    # ...
    # 增加下列命令， index.html 可换为项目中使用的其它文件名
    try_files $uri $uri/ /index.html;
  }
}

知识扩展：

Nginx 的 try_files 命令的使用方式有两种：

try_files file ... uri;
try_files file ... =code;

该命令用于根据指定的参数依次检查寻找对应的文件，若所有文件都找不到将会在内部重定向至最后一个参数指定的文件。

当使用 =code 时，代表若找不到对应的文件将返回 code 对应的错误。

$uri 代表请求的文件及其路径，$uri/ 表示对应路径的目录。

例如请求 http://example.com/page 时，$uri 表示资源目录下是否存在名为 page 的文件，$uri/ 表示名为 page 的目录。

所以，我们在配置文件中增加的命令表示接收到请求时先寻找 uri 对应的文件或目录，若不存在则返回 index.html 文件。