在开发中可能一个项目包含多个子项目,如前端项目和后台管理的项目放在同一个服务器目录中。
前端项目地址是 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
文件。
未经允许不得转载:w3h5 » Umi&React打包部署到非根目录及刷新报错404的问题解决
原创文章,作者:3628473679,如若转载,请注明出处:https://blog.ytso.com/150545.html