Django与Mithril路由冲突：初始加载子页面时静态文件404问题

这个问题的核心原因是相对路径的基准问题：当你通过前端JavaScript跳转到mysite.com/subpage/item3时，浏览器的当前路径基准还是根目录/，所以静态文件/static/app.bundle.js的引用是正确的；但直接访问这个子路由时，浏览器会把/subpage/item3当成当前路径，导致静态文件的相对引用被解析成/subpage/static/app.bundle.js，这就超出了Django的静态文件路由范围，自然返回404。

下面是几个可行的解决方案：

1. 使用绝对路径引用静态文件 #

这是最直接的修复方法：在你的Django模板中，把静态文件的引用改成以斜杠开头的绝对路径。比如把原来的：

<script src="static/app.bundle.js"></script>

改成：

<script src="/static/app.bundle.js"></script>

开头的/会告诉浏览器从网站根目录开始查找静态文件，不管当前访问的是哪个子路由，都会正确指向mysite.com/static/app.bundle.js。

2. 用Django的静态文件模板标签生成正确路径 #

为了避免手动写路径出错，推荐使用Django内置的static模板标签来生成静态文件的绝对路径。首先确保模板顶部加载了静态文件标签：

{% load static %}

然后引用静态文件时写成：

<script src="{% static 'app.bundle.js' %}"></script>

Django会自动根据你在settings.py中配置的STATIC_URL生成正确的绝对路径，比如如果STATIC_URL = '/static/'，渲染后就会变成/static/app.bundle.js，和第一种方法效果一致，但更灵活（比如后续修改STATIC_URL时不需要手动改模板）。

3. 配置Django路由，让所有SPA路由指向主页面 #

因为Mithril是单页应用（SPA），所有前端路由都应该由Mithril处理，而不是Django。所以需要在Django的urls.py中添加一个通配符路由，把所有非API、非静态文件的请求都返回主页面模板。比如：

from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    # 先放你的API路由、admin路由等
    path('admin/', admin.site.urls),
    path('api/', include('your_api_app.urls')),
    
    # 然后添加SPA路由：根路径和所有其他路径都返回主页面
    path('', TemplateView.as_view(template_name='index.html')),
    path('<path:path>', TemplateView.as_view(template_name='index.html')),
]

这样配置后，当用户直接访问mysite.com/subpage/item3时，Django会返回主页面，Mithril加载后会根据URL中的路径渲染对应的子页面，同时配合前两种方法的静态文件绝对路径引用，就不会再出现404问题了。

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