TYPESCRIPT

vue3, vite and django

//in django-app
pip install django-vite

//in django-app settings.py
INSTALLED_APPS = [
    ...
    'django_vite',
    ...
]

//in vue_app package.json
"scripts: {
  ...
  "build": "vue-tsc --noEmit && npm run build:client && npm run build:server",
  "build:client": "vite build --ssrManifest --outDir dist/client",
  "build:server": "vite build --ssr src/entry-server.js --outDir dist/server",
  ...
}
  
//in vue_app vite.config.ts
export default defineConfig({
  ...
    build: {
    // generate manifest.json in outDir
    manifest: true,
      // overwrite default .html entry
    outDir: resolve('<path-to-your-static-file>'),
    assetsDir: '',
    manifest: true,
    emptyOutDir: true,
    target: 'es2015',
    rollupOptions: {
      input: {
        main: resolve('<path-to-your-static-file>'),
      },
      output: {
        chunkFileNames: undefined,
      },
    },
  }
})

//in vue-app main.ts
import 'vite/modulepreload-polyfill'; PLEASE READ THIS "this will lead to Uncaught ReferenceError: __VITE_IS_MODERN__ is not defined" error
SO DO NOT IMPORT!

//in django-app settings.py
# Where ViteJS assets are built.
DJANGO_VITE_ASSETS_PATH = BASE_DIR / "static" / "dist"

# If use HMR or not.
DJANGO_VITE_DEV_MODE = DEBUG

# Name of static files folder (after called python manage.py collectstatic)
STATIC_ROOT = BASE_DIR / "collectedstatic"

# Include DJANGO_VITE_ASSETS_PATH into STATICFILES_DIRS to be copied inside
# when run command python manage.py collectstatic
STATICFILES_DIRS = [DJANGO_VITE_ASSETS_PATH]