Django无法加载React打包静态文件，报MIME类型错误

问题场景 #

我按步骤创建Django和Vite React项目，将React项目以frontend为名放入Django项目中。执行npm run build后，frontend/dist的文件结构如下：

│   index.html
│   vite.svg
│
└───assets
        index-757929e7.js
        index-a9bba2ed.css

在Django的settings.py中配置了模板路径：

TEMPLATES = [
    {
        "DIRS": [
            BASE_DIR / 'frontend/dist'
        ],
    },
]

添加了静态文件目录配置：

STATICFILES_DIRS = [
    BASE_DIR / 'frontend/dist/assets'
]

并在urls.py中添加路由：

path('', TemplateView.as_view(template_name='index.html'))

访问127.0.0.1:8000时HTML正常加载，但CSS和JS文件无法加载，浏览器报错：

Refused to apply style from 'http://localhost:8000/assets/index-a9bba2ed.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

生成的frontend/dist/index.html代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <script type="module" crossorigin src="/assets/index-757929e7.js"></script>
    <link rel="stylesheet" href="/assets/index-a9bba2ed.css">
  </head>
  <body>
    <div id="root"></div>
    
  </body>
</html>

问题原因 #

1. Vite生成的静态资源路径是/assets/和/vite.svg，但Django的静态资源默认前缀是/static/，且未配置对应路由匹配/assets/路径，导致请求这些资源时被Django的首页路由捕获，返回的是HTML文件而非静态资源，因此MIME类型错误。
2. STATICFILES_DIRS仅指向assets目录，根目录下的vite.svg无法被Django的静态文件处理器识别。

解决方案 #

1. 修改Vite配置，调整资源路径前缀 #

在frontend/vite.config.js中添加base配置，让Vite生成的资源路径带上Django静态资源前缀/static/：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/static/' // 添加这一行
})

2. 调整Django静态文件目录配置 #

修改settings.py中的STATICFILES_DIRS，指向整个dist目录，确保所有静态资源都能被识别：

STATICFILES_DIRS = [
    BASE_DIR / 'frontend/dist'
]

3. 重新构建React项目并重启Django服务 #

进入frontend目录执行构建命令：

cd frontend && npm run build

然后重启Django开发服务器，再次访问127.0.0.1:8000即可正常加载CSS和JS资源。

补充：生产环境注意事项 #

生产环境部署时，需要执行Django的collectstatic命令，将所有静态资源收集到STATIC_ROOT指定的目录：

python manage.py collectstatic

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