Django+React项目部署时favicon和manifest.json加载失败如何解决

• React打包后生成的manifest.json、favicon.ico等资源默认存放在build根目录，你未将该目录纳入Django静态资源查找范围，执行collectstatic时不会将这类资源收集到静态资源目录
• 前端index.html中使用%PUBLIC_URL%占位符生成的资源路径，默认与Django配置的STATIC_URL = '/static/'不匹配，导致浏览器请求/manifest.json而非/static/manifest.json，返回404错误
• manifest.json加载失败会影响移动端网页添加到桌面的图标显示，桌面端favicon加载失败同样是资源路径不匹配导致，二者可同步修复

步骤1：完善Django静态资源配置 #

在settings.py中添加STATICFILES_DIRS配置，指定Django查找静态资源的额外路径：

STATICFILES_DIRS = [
    # 引入React打包生成的静态资源
    os.path.join(BASE_DIR, 'build', 'static'),
    # 引入build根目录下的manifest、favicon等资源
    os.path.join(BASE_DIR, 'build')
]

步骤2：修正前端资源引用路径 #

二选一即可：

• 方式1：在React项目的package.json中添加homepage字段，值设置为/static，执行npm run build时%PUBLIC_URL%会自动替换为/static，生成的资源路径自动适配Django的静态资源前缀
• 方式2：直接修改public/index.html中的资源引用路径，固定添加/static前缀：

<link rel="icon" href="/static/favicon.ico" />
<link rel="apple-touch-icon" href="/static/logo192.png" />
<link rel="manifest" href="/static/manifest.json" />

步骤3：（可选）配置路由兼容根路径资源请求 #

如果不想修改前端代码，可直接在项目urls.py中添加重定向规则，直接响应根路径的资源请求：

from django.views.generic import RedirectView
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 原有其他路由
    path('manifest.json', RedirectView.as_view(url='/static/manifest.json')),
    path('favicon.ico', RedirectView.as_view(url='/static/favicon.ico')),
    path('logo192.png', RedirectView.as_view(url='/static/logo192.png')),
    path('logo512.png', RedirectView.as_view(url='/static/logo512.png')),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

步骤4：重新执行打包与静态资源收集 #

1. 进入React项目目录执行npm run build重新打包前端资源
2. 回到Django项目根目录执行python manage.py collectstatic --noinput，确认输出日志中包含manifest.json、favicon.ico等资源的复制记录

配置完成后重启Django服务即可正常加载manifest.json与favicon图标。

内容的提问来源于stack exchange，提问作者Faisal Nazik