部署Django项目至Render后样式与JS文件无法加载的求助

问题现象 #

• 部署到Render后，图片可正常显示，但自定义CSS（style.css）、JS（main.js）及Django Admin样式均未生效
• 控制台提示样式表因MIME类型问题未加载

初始配置 #

settings.py 静态/媒体文件配置 #

STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / 'static']

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

主项目urls.py配置 #

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('store.urls')),
    path('chatbot/', include('chatbot.urls')),
]

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

base.html 静态文件引用 #

{% load static %}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <link rel="stylesheet" href="{% static 'style.css' %}">
  <!-- jquery -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  
  <!-- custom css & js -->
  <script src="{% static 'main.js' %}" defer></script>
  <link rel="shortcut icon" href="{% static 'favicon.ico' %}">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <title>U-Community Mart</title>

</head>


<body class="body-main">
{% include 'navbar.html' %}
{% if messages %}
    {% for message in messages %}
        <div class="alert alert-info alert-dismissible fade show" id="message" role="alert">
          {{message}}
        </div>
    {% endfor %}
{% endif %}
  <div class="container" style="margin-top: 50px; margin-bottom: 0; margin-left: auto; margin-right: auto;">
    {% block content %}
    {% endblock content %}
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>

</body>

</html>

第一次尝试解决（部分生效） #

安装whitenoise并修改配置：

修改后的settings.py #

STATIC_URL = '/static/'
if not DEBUG:
    STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
    STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

在SecurityMiddleware后添加中间件：

'whitenoise.middleware.WhiteNoiseMiddleware'

• 效果：Django Admin样式恢复，但自定义CSS/JS仍无法加载
• 曾尝试修改HTML路径为相对路径（static/style.css），无效

最终解决方法 #

1. 修正settings.py配置 #

确保STATIC_ROOT无论DEBUG状态都指向staticfiles，同时保留STATICFILES_DIRS：

STATIC_URL = '/static/'
if not DEBUG:
    STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
    STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATICFILES_DIRS = [BASE_DIR / 'static']
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

2. 收集静态文件到staticfiles目录 #

运行命令：

python manage.py collectstatic

• 原理：Render会从staticfiles文件夹读取静态资源，此前该文件夹为空，执行collectstatic会将所有静态文件（包括自定义的style.css、main.js及Django Admin的静态文件）收集到该目录，从而被正确加载。

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