React+Vite对接Django后端出现MIME类型错误求助

1. 修正URL路由顺序 #

Django的URL匹配遵循从上到下的优先级，你当前把通配符路由re_path(r'^.*$', ...)放在最前面，导致所有请求（包括JS、SVG文件）都被返回index.html，这就是MIME类型错误的核心原因。必须把通配符路由移到最后：

from django.urls import path, include, re_path
from django.views.generic import TemplateView
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('auth/', include('djoser.urls.jwt')),
    path('vite.svg', TemplateView.as_view(template_name='vite.svg')),
    # 通配符路由必须放在最后，确保前面的具体路由优先匹配
    re_path(r'^.*$', TemplateView.as_view(template_name='index.html')),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

2. 配置Django模板目录 #

确保Django能找到dist目录下的index.html，修改settings.py中的TEMPLATES配置：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'dist')],  # 将dist目录加入模板搜索路径
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

3. 调整Vite构建路径 #

Vite默认构建后的资源路径是根目录下的/assets/，但Django的静态资源前缀是/static/，两者不匹配会导致资源加载失败。修改vite.config.js：

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

export default defineConfig({
  plugins: [react()],
  base: '/static/'  // 设置静态资源基础路径与Django的STATIC_URL一致
})

重新构建前端项目：

npm run build

将新生成的dist文件夹复制到Django项目根目录。

4. 验证静态资源访问 #

启动Django服务后，尝试访问http://localhost:8000/static/assets/index-d5Zm7UFq.js，如果能正常返回JS文件，说明静态资源配置正确。

5. 生产环境额外操作 #

如果是生产环境部署，需要运行以下命令将所有静态资源收集到STATIC_ROOT指定的目录：

python manage.py collectstatic

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