Django + Vite + Vue Router 集成运行异常求助

核心问题 #

浏览器加载Vite编译后的JS文件时，未被标记为ES模块，导致无法解析import/export语法——单独运行Vite时，开发服务器会自动处理模块标识，但结合Django后需要手动配置。

具体解决步骤 #

1. 调整Vite配置文件（vite.config.js） #

确保Vite输出兼容Django静态资源的模块格式，并生成资源映射清单：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  build: {
    // 输出到Django静态目录下的dist文件夹
    outDir: resolve(__dirname, 'your_django_app/static/dist'),
    // 生成manifest.json用于Django映射资源路径
    manifest: true,
    // 指定输出为ES模块格式
    format: 'es',
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'src/main.js'),
      },
    },
  },
  server: {
    // 允许Django跨域请求Vite开发服务器资源
    cors: true,
    port: 5173,
  },
})

2. 修改Django模板的资源加载逻辑 #

在渲染Vue的Django模板中，给脚本添加type="module"属性，并通过manifest.json正确加载资源：

{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue + Django</title>
</head>
<body>
  <div id="app"></div>
  {% if debug %}
    <!-- 开发环境直接加载Vite开发服务器的入口文件 -->
    <script type="module" src="http://localhost:5173/src/main.js"></script>
  {% else %}
    <!-- 生产环境通过manifest.json加载编译后的资源 -->
    {% with manifest=static 'dist/manifest.json'|json_load %}
      <script type="module" src="{% static manifest['main.js'].file %}"></script>
      <link rel="stylesheet" href="{% static manifest['main.js'].css %}">
    {% endwith %}
  {% endif %}
</body>
</html>

提示：需要安装django-manifest-loader或自定义模板标签来解析manifest.json，避免手动拼接资源路径出错。

3. 检查Django静态资源配置 #

确保settings.py中静态目录配置正确：

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / 'your_django_app/static',
]
# 生产环境收集静态文件的目标目录
STATIC_ROOT = BASE_DIR / 'staticfiles'

4. 开发环境验证 #

开发时要同时启动Vite（npm run dev）和Django服务器，确保Django模板正确指向Vite的开发服务器地址，且Vite的跨域配置生效。

验证流程 #

1. 执行npm run build编译Vue项目，确认dist目录生成manifest.json和编译后的JS/CSS文件。
2. 启动Django服务器，访问页面查看控制台是否还有模块语法错误。
3. 开发环境下测试页面热更新功能是否正常。

内容的提问来源于stack exchange，提问作者Jayesh