Django集成Nuxt JS时/_nuxt/路径静态资源请求返回404报错

你仅配置了Django模板查找路径指向Nuxt打包后的dist目录，让Django可以识别并返回入口index.html文件，但没有为Nuxt打包生成的_nuxt静态资源目录配置对应的请求路由映射。
Nuxt打包输出的dist目录结构为：根目录存放入口index.html，所有JS、CSS、图片等静态资源全部存放在dist下的_nuxt子目录中。你当前的路由配置仅处理了MEDIA路径下的资源请求，没有对/_nuxt/开头的资源请求做任何映射，Django收到这类请求后找不到对应处理逻辑，直接返回404状态。

• 第一步：补充settings.py静态资源配置
  把Nuxt dist下的_nuxt目录加入Django静态文件查找路径，注意将代码里的(Name of the nuxt application folder)替换为你实际的Nuxt项目文件夹名：

  STATIC_URL = 'static/'
  # 新增Nuxt静态资源查找路径
  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, '(Name of the nuxt application folder)/dist/_nuxt'),
  ]
  

• 第二步：修改urls.py添加/_nuxt/路径映射
  首先确认文件头部已导入os模块，之后在路由规则中补充_nuxt路径的静态资源响应逻辑：

  import os
  from django.contrib import admin
  from django.urls import 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),
      path('', TemplateView.as_view(template_name='index.html'), name='nuxt-index')
  ]
  
  # 保留原有媒体资源映射
  urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  # 新增_nuxt静态资源映射
  urlpatterns += static('/_nuxt/', document_root=os.path.join(settings.BASE_DIR, '(Name of the nuxt application folder)/dist/_nuxt'))
  

• 第三步：校验Nuxt打包配置
  打开Nuxt项目下的nuxt.config.js或nuxt.config.ts，确认静态资源公共路径配置为默认的/_nuxt/，如果之前做过自定义修改需要调整回来，否则index.html里的资源引用路径会不匹配：

  export default {
    build: {
      publicPath: '/_nuxt/'
    }
  }
  

  配置确认后重新执行Nuxt打包命令生成最新的dist文件：

  npm run generate
  

• 第四步：重启Django服务，清除浏览器缓存后重新访问，/_nuxt/路径下的JS、图片等资源即可正常加载。

补充说明：如果后续Nuxt前端路由跳转出现404，是因为Django没有匹配前端路由的通配规则，只需要在所有路由的最后添加一条通配路由，将未命中后台规则的请求全部指向index.html即可，注意这条路由必须放在最后，避免覆盖admin、后端接口等原有路由：

from django.urls import re_path
# 追加到urlpatterns最末尾
re_path(r'^.*$', TemplateView.as_view(template_name='index.html'), name='nuxt-frontend-routes')

注意：以上配置仅适用于本地开发环境，生产环境不建议用Django处理静态资源请求，应该使用Nginx等Web服务器直接托管Nuxt打包生成的dist目录资源，访问性能更高。

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