Django模板可访问但静态文件（JS/CSS/PNG）加载失败求助

问题描述 #

部署Django模板时，index.html页面可正常访问，但与该文件同目录的静态文件（js、css、png等）全部加载失败。

配置信息 #

Settings.py #

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates')
        ],
        'APP_DIRS': True,
    },
]

主urls.py #

from django.contrib import admin
from django.urls import path, include
from django.conf.urls import url
from django.conf import settings
from django.conf.urls.static import static
from rest_framework.authtoken import views

urlpatterns = [
    path('rest-framework/', include('rest_framework.urls')),
    path('api/', include('accounts.urls')),
    path('admin/', admin.site.urls),
    url(r'^rest-auth/',  views.obtain_auth_token),
]

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

应用accounts/urls.py #

from django.urls import path
from . import views

urlpatterns = [
    path('homepage/', views.index, name='index'),
]

accounts/views.py #

def index(request):
    return render(request, 'index.html')

错误日志 #

[15/May/2024 08:31:40] "GET /api/homepage/ HTTP/1.1" 200 1837
Not Found: /api/homepage/flutter.js
[15/May/2024 08:31:40] "GET /api/homepage/flutter.js HTTP/1.1" 404 2674
Not Found: /api/homepage/manifest.json
[15/May/2024 08:31:40] "GET /api/homepage/manifest.json HTTP/1.1" 404 2683

项目目录结构 #

accounts\
├── migrations\
└── templates\
server\
media\
static\
manage.py
requirements.txt

index.html关键代码 #

<base href="/">

<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>

<title>bilmarkgorevdagilimi</title>
<link rel="manifest" href="manifest.json">


<script>
  // The value below is injected by flutter build, do not touch.
  var serviceWorkerVersion = '2027642995';
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>

已尝试操作 #

• 执行python manage.py findstatic --verbosity 2 flutter.js未找到文件
• 尝试使用{% load static %}和{% static 'flutter.js' %}标签仍未解决

解决方案 #

1. 修正静态文件存放路径 #

将所有静态文件（flutter.js、manifest.json、favicon.png等）从templates/目录移动到项目根目录的static/文件夹下，Django会从STATIC_ROOT指定的目录查找静态资源。

2. 规范模板中静态文件引用方式 #

在index.html的最顶部添加静态文件加载标签，然后修改所有静态资源的引用路径：

{% load static %}

<base href="/">

<!-- Favicon -->
<link rel="icon" type="image/png" href="{% static 'favicon.png' %}"/>

<title>bilmarkgorevdagilimi</title>
<link rel="manifest" href="{% static 'manifest.json' %}">


<script>
  // The value below is injected by flutter build, do not touch.
  var serviceWorkerVersion = '2027642995';
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="{% static 'flutter.js' %}" defer></script>

3. 执行静态文件收集命令 #

运行以下命令，将所有应用的静态文件统一收集到STATIC_ROOT目录：

python manage.py collectstatic

（注：生产环境必须执行此命令，开发环境若DEBUG=True可省略，但建议执行以确保路径正确）

4. 验证开发环境静态服务配置 #

确保settings.py中DEBUG = True，只有DEBUG模式开启时，Django才会自动处理静态文件的请求（生产环境需用Nginx等服务器托管静态资源）。

5. 验证静态文件路径 #

再次执行以下命令，确认文件已被正确识别：

python manage.py findstatic flutter.js

如果返回文件路径，说明配置正确；否则检查文件是否确实存放在static/目录下。

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