Django + Vite
Django - Vite
-
Create Django Project
django-admin startproject dj_project
cd dj_project
-
Initialize vue project into dj_project
npm init vite frontend
cd frontend
npm install
-
Install webpack-stats
npm install -D rollup-plugin-webpack-stats
-
Build project
npm run build
-
package.json
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@vuepic/vue-datepicker": "^8.8.0",
"vue": "^3.3.11"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.2",
"@vue/compiler-sfc": "^3.4.27",
"fs": "^0.0.1-security",
"glob": "^10.4.1",
"require": "^2.4.20",
"rollup-plugin-webpack-stats": "^0.4.1",
"typescript": "^5.2.2",
"vite": "^5.0.8",
"vue-tsc": "^1.8.25",
"vue3-runtime-template": "^1.0.2"
}
}
-
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
import { webpackStats } from 'rollup-plugin-webpack-stats';
import * as fs from 'node:fs';
const LOCAL_PATH = 'src/';
var files = fs.readdirSync(LOCAL_PATH);
var entries = {};
files.forEach(function(item) {
if (fs.statSync(LOCAL_PATH + item).isDirectory()) {
let tmp_files = fs.readdirSync(LOCAL_PATH + item);
tmp_files.forEach(function(tmp_item) {
if (tmp_item.includes('.js')) {
let tmp_name = tmp_item.split(".");
entries[item + "/" + tmp_name[0]] = LOCAL_PATH + item + "/" + tmp_item;
}
});
} else {
if (item.includes('.js')) {
let tmp_name = item.split(".");
entries[tmp_name[0]] = LOCAL_PATH+item;
}
}
});
export default defineConfig({
resolve:{
alias:{
vue: 'vue/dist/vue.esm-bundler.js'
}
},
plugins: [
vue(),
webpackStats(),
],
build:{
outDir: '../static/frontend',
assetsDir:'',
rollupOptions:{
input:entries
}
}
})