Django+Vue3生产环境JS脚本MIME类型为text/html无法执行问题求助

这个报错的本质是请求JS静态资源时，服务器没有找到对应文件，返回了Django的404/SPA fallback HTML页面，所以浏览器把HTML当JS执行触发了MIME校验错误，可按以下步骤逐一排查解决：

第一步：校验webpack构建产物和配置一致性 #

• 确认执行npm run build之后，./assets/dist目录下确实生成了对应app-[hash].js文件，项目根目录下的webpack-stats.json里记录的文件名、publicPath和实际产物匹配
• 修正webpack的BundleTracker配置，Django配置里BUNDLE_DIR_NAME为dist/，webpack的publicPath需要和Django静态资源前缀保持匹配，修改示例如下：

// webpack.config.js plugins部分修改
new BundleTracker({
  filename: './webpack-stats.json',
  publicPath: '/static/dist/' // 和Django的STATIC_URL + BUNDLE_DIR_NAME保持完全一致
})

第二步：校验Django静态资源配置 #

• 确认生产环境已执行python manage.py collectstatic，webpack构建出的./assets/dist目录下所有文件，已经被收集到Django配置的STATIC_ROOT目录的dist子目录中
• 检查Django settings.py的静态资源配置是否正确，示例如下：

STATIC_URL = '/static/'
# 生产环境静态资源存放的根目录
STATIC_ROOT = '/home/ytsejam/public_html/medtourism/medtourism/static/' 
STATICFILES_DIRS = [
  # 加入webpack构建产物的上级目录，collectstatic才能扫描到dist目录
  path.join(BASE_DIR, 'frontend', 'assets'),
]

• 生产环境如果用Nginx/Apache做反向代理，要确认/static/开头的请求直接指向STATIC_ROOT目录，不要转发给Django处理。

第三步：校验URL路由优先级 #

如果配置了SPA fallback路由（所有未匹配请求都返回index.html），要确保静态资源路由优先级高于fallback路由，示例配置如下：

# urls.py 示例
from django.contrib import admin
from django.urls import path, re_path
from django.views.generic import TemplateView
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
  path('admin/', admin.site.urls),
  # 所有API接口路由放在前面
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) # 静态资源路由优先级更高

# 最后再放置SPA fallback路由
urlpatterns += [
  re_path(r'^.*', TemplateView.as_view(template_name='index.html'))
]

临时验证方法 #

直接在浏览器访问https://medtourism.uk/static/dist/app-a7abdc6b502c1335fd69.js，如果返回的是HTML内容，说明静态资源路径配置错误，按照上述步骤调整即可。

补充优化点 #

模板中的<link rel="icon" href="<%= BASE_URL %>favicon.ico">是webpack模板语法，Django无法解析，建议修改为<link rel="icon" href="{% static 'favicon.ico' %}">，避免favicon 404问题。

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