如何搭建Django并修复静态文件MIME类型错误及整理文件结构？

一、Django基础搭建步骤 #

• 安装Django：pip install django
• 创建项目：django-admin startproject myproject
• 进入项目目录：cd myproject
• 创建应用：python manage.py startapp myapp
• 在settings.py的INSTALLED_APPS列表中添加'myapp'
• 启动开发服务器：python manage.py runserver

二、静态文件配置（解决MIME错误+自定义CSS引用） #

1. 配置settings.py静态文件路径 #

在项目根目录创建static文件夹，内部再建styles、scripts子文件夹（对应你的自定义文件存放需求），然后修改settings.py：

# settings.py
import os

# 静态文件访问URL前缀
STATIC_URL = '/static/'
# 指定项目级静态文件目录
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

2. 模板中正确引用静态文件 #

在HTML模板顶部加载static标签，再通过模板标签引用文件：

<!-- 模板最顶部加载static标签 -->
{% load static %}

<!-- 引用styles文件夹下的自定义CSS -->
<link rel="stylesheet" href="{% static 'styles/your-custom.css' %}">

<!-- 引用scripts文件夹下的JS -->
<script src="{% static 'scripts/scripts.js' %}"></script>

3. 解决MIME类型错误 #

你遇到的Refused to execute script... MIME type ('text/html')错误，本质是Django找不到静态文件，返回了404错误页面（MIME类型为text/html）。排查修复：

• 确认STATICFILES_DIRS路径指向的static文件夹存在，且内部子目录、文件位置正确
• 检查HTML中{% static %}的路径和实际文件路径完全匹配（比如scripts.js必须在static/scripts/下）
• 直接访问http://127.0.0.1:8000/static/scripts/scripts.js，如果返回404，说明路径或文件位置有误

三、模板文件结构整理 #

按应用+项目级分类整理，避免杂乱：

• 应用级模板：在myapp目录下创建templates/myapp文件夹，把该应用专属的模板放在这里（比如myapp/templates/myapp/home.html）
• 项目级通用模板：在项目根目录创建templates文件夹，修改settings.py的TEMPLATES配置：

# settings.py
TEMPLATES = [
    {
        ...
        'DIRS': [os.path.join(BASE_DIR, 'templates')],  # 添加项目级模板目录
        ...
    },
]

• 可创建templates/base.html作为全局基础模板，其他页面通过{% extends 'base.html' %}继承，统一页面结构

四、验证配置 #

1. 确认所有静态文件都放在对应子目录下
2. 重启开发服务器（修改settings.py后需重启）
3. 刷新页面，检查控制台错误是否消失，自定义CSS是否生效

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