如何在Django后端静态资源中部署Svelte前端构建产物？

一、修复模板找不到的问题 #

Django抛出TemplateDoesNotExist是因为未配置模板目录指向Svelte构建产物的存放位置。

• 修改settings.py，找到TEMPLATES配置项，在DIRS中添加Svelte构建后dist目录的绝对路径：

# settings.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'dist')],  # 新增：指向Svelte构建产物目录
        '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',
            ],
        },
    },
]

• 调整views.py中的模板路径，直接使用index.html即可（已将dist加入模板搜索目录）：

# views.py
from django.shortcuts import render
def index(request):
    return render(request, 'index.html')

二、修正静态资源加载配置 #

确保Django能正确识别Svelte构建生成的JS/CSS文件：

• 确认STATICFILES_DIRS指向正确的静态资源目录：

# settings.py
STATIC_URL = "/static/" 
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'dist/assets')]  # 指向dist下的assets文件夹

• 打开dist/index.html，将所有资源引用的路径前缀改为/static/（匹配Django的STATIC_URL）：
  原引用示例：

<script src="assets/index.js"></script>
<link rel="stylesheet" href="assets/index.css">

修改后：

<script src="/static/index.js"></script>
<link rel="stylesheet" href="/static/index.css">

三、适配Svelte客户端路由（可选） #

如果你的Svelte应用使用了客户端路由，需配置Django将所有前端路由请求转发到index.html，避免刷新页面时出现404：

• 修改urls.py，添加通配路由（注意放在API路由之后，避免覆盖接口）：

# urls.py
from django.urls import path, re_path
from . import views

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("api.urls")),
    path('index/', views.index, name='index'),
    # 新增：匹配所有前端路径，转发到index.html
    re_path(r'^.*$', views.index),
]

内容的提问来源于stack exchange，提问作者Xuan Viet Chu