Django 集成 vite

Question

首先需要创建 template tag 将 vite 所引用的 js 注入到 django 的模版当中，路径： {app}/templatetags/vite.py ：

from django import template
from django.utils.safestring import mark_safe
from urllib.parse import urljoin
from django.conf import settings

register = template.Library()


@register.simple_tag
@mark_safe
def vite_module(path: str) -> str:
    src = urljoin(settings.VITE_URL, path if path is not None else "")
    return f'<script type="module" src="{src}"></script>'


@register.simple_tag
@mark_safe
def vite_client() -> str:
    src = urljoin(settings.VITE_URL, '/@vite/client')
    return f'<script type="module" src="{src}"></script>'


@register.simple_tag
@mark_safe
def vite_entry() -> str:
    src = urljoin(settings.VITE_URL, settings.VITE_ENTRY)
    return f'<script type="module" src="{src}"></script>'

在 settings.py 中配置两个变量：

VITE_URL = 'http://localhost:3000'
VITE_ENTRY = '/src/main.ts'

在 admin 视图中引入，复制 django 中的 changelist 模版到自己创建的 app 模板中，路径： {app}/templates/admin/{app}/change_list.html :

{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list vite %}

{% block extrastyle %}
    {% vite_client %}
    {% vite_entry %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% static "admin/css/changelists.css" %}">
  {% if cl.formset %}
    <link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}">
  {% endif %}
  {% if cl.formset or action_form %}
    <script src="{% url 'admin:jsi18n' %}"></script>
  {% endif %}
  {{ media.css }}
  {% if not actions_on_top and not actions_on_bottom %}
    <style>
      #changelist table thead th:first-child {width: inherit}
    </style>
  {% endif %}
{% endblock %}

{% load vite %} 加载自定义标签， {% vite_client %} 和 {% vite_entry %} 使用标签，现在就可以使用 vite 了，并且 hot reload 自动刷新页面。