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

2023-08-25 13:18:44 浏览数 (1)

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

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

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

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

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

代码语言:javascript复制
export default defineConfig({
  base: '/path/ourAppRoot',
  // ...
};

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

这时需要修改一下服务器的配置,以 Nginx 为例:(Nginx配置文件位置为/etc/nginx/nginx.conf

代码语言:javascript复制
server {
  # ...

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

知识扩展:

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

代码语言:javascript复制
try_files file ... uri;
try_files file ... =code;

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

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

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

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

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

未经允许不得转载:w3h5-Web前端开发资源网 » Umi&React打包部署到非根目录及刷新报错404的问题解决

0 人点赞