在开发中可能一个项目包含多个子项目,如前端项目和后台管理的项目放在同一个服务器目录中。
前端项目地址是 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-Web前端开发资源网 » Umi&React打包部署到非根目录及刷新报错404的问题解决