大数据

django-vite：vite与django、tailwindcss v4集成

Posted by

一、基础配置

1、安装django-vite包

项目地址：https://github.com/MrBin99/django-vite

pip install django-vite

2、django项目创建static目录

目录结构如下：

important.js

export function sayHello(name) {
    console.log(`Hello ${name}`)
}

main.js

import {sayHello} from "./important";

console.log("Hello from Vite")
sayHello("Tom")

3、添加django-vite到django中

编辑settings.py文件

INSTALLED_APPS = [
    ...
    'django_vite'
]

# 需要确定以下一致
STATIC_URL = 'static/'

二、vite配置

1、创建vite配置文件

在django根目录创建vite.config.js文件

import {defineConfig} from 'vite';
import {resolve} from 'path';

export default defineConfig({
  base: "/static/",
  build: {
    manifest: "manifest.json",
    outDir: resolve("./assets"),
    rollupOptions: {
      input: {
        test: resolve("./static/js/main.js")
      }
    }
  }
})

执行初始化命令

npm init -y

以上命令会自动在django根目录生成package.json文件

{
  "name": "learn_django_vite",
  "version": "1.0.0",
  "description": "",
  "main": "vite.config.js",
  "scripts": {
    "test": "xxxx"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs"
}

2、安装vite

npm i -D vite

会在package.json中添加包信息

{
  "name": "learn_django_vite",
  ...
  "devDependencies": {
    "vite": "^6.3.5"
  }
}

3、添加启动命令

{
  "name": "learn_django_vite",
  ...
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  ...
}

执行命令

# 运行测试环境
npm run dev
# js打包
npm run build

执行build会在django根目录下创建assets目录，vite.config.js中配置，另外生成的js文件前缀与下面配置有关

export default defineConfig({
  base: "/static/",
  build: {
    manifest: "manifest.json",
    outDir: resolve("./assets"),
    rollupOptions: {
      input: {
        test: resolve("./static/js/main.js")
      }
    }
  }
})

生成的js文件前缀test来自input中的test，修改这里可改变前缀

如果要修改子目录中的assets文件夹名称，在build中添加assetsDir即可

export default defineConfig({
  base: "/static/",
  build: {
    manifest: "manifest.json",
    outDir: resolve("./assets"),
    assetsDir: "django-assets",
    rollupOptions: {
      input: {
        test: resolve("./static/js/main.js")
      }
    }
  }
})

执行build命令后结构如下

4、修改settings.py配置

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / 'assets'
]

STATIC_ROOT = BASE_DIR / 'staticfiles'

settings.py尾部添加：

DJANGO_VITE = {
    "default": {
        "dev_mode": True
    }
}

Dev Mode

The dev_mode/DJANGO_VITE_DEV_MODE boolean defines if you want to include assets in development mode or production mode.

  • In development mode, assets are included as modules using the ViteJS webserver. This will enable HMR for your assets.
  • In production mode, assets are included as standard assets (no ViteJS webserver and HMR) like default Django static files. This means that your assets must be compiled with ViteJS before.
  • This setting may be set as the same value as your DEBUG setting in Django. But you can do what is good for your needs.

三、集成到html模板

1、创建app：core

在core中创建模板文件

base.html中添加vite标签

{% load django_vite %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Django & Vite</title>
    {% vite_hmr_client %}
    {% vite_asset 'static/js/main.js' %}
</head>
<body>
    <div class="m-12">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

vite_hmr_client标签只有在DJANGO_VITE配置"dev_mode": True时生效

vite_asset标签内容来自vite.config.js中input标签内容

export default defineConfig({
  ...
    rollupOptions: {
      input: {
        test: resolve("./static/js/main.js")
      }
    }
  }
})

生成的assets目录中manifest.json也有体现

index.html

{% extends 'base.html' %}

{% block content %}
    Hello
{% endblock %}

core/views.py

from django.shortcuts import render


def index(request):
    return render(request, 'index.html')

core/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name="index")
]

根项目urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('core.urls'))
]

四、运行项目

1、启动vite

npm run dev

2、启动django

python manage.py runserver

3、访问django页面

http://localhost:8000/

打开浏览器开发者页面，查看console选项卡

编辑static/js/main.js 会实时刷新django页面

五、集成tailwindcss v4

https://tailwindcss.com/docs/installation/using-vite

1、安装tailwindcss

npm install tailwindcss @tailwindcss/vite

创建文件static/css/main.css

@import "tailwindcss";

vite配置文件vite.config.js添加tailwindcss

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

main.js引入main.css

import "../css/main.css"
import {sayHello} from "./important";

console.log("Hello from Vite")
sayHello("Tom")

重新运行django项目，如果运行报错，修改vite.config.js为vite.config.mjs

2、验证tailwindcss是否生效

<body class="bg-red-500">
    <div class="m-12">
        {% block content %}
        {% endblock %}
    </div>
</body>

页面添加背景色，浏览器查看是否生效

6、其他配置

1、vite添加目录别名方便js中路径引用

import {defineConfig} from 'vite';
import {resolve} from 'path';
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  base: "/static/",
  resolve: {
    alias: {
      '@': resolve("./static")
    }
  },
  ...
})

上面修改后

static/js/main.js中的代码可修改为

import "@/css/main.css";

2、生成模式

settings.py修改

DJANGO_VITE = {
    "default": {
        "dev_mode": False
    }
}

执行命令

npm run build
python manage.py collectstatic

运行django，无需运行vite，浏览器访问 http://localhost:8000/

下一篇
django-vite集成HTMX、Alpine.js、daisyUI、Flowbite
上一篇 Python读取配置文件的实战操作