在Django模板中引入Vue组件报错：Uncaught SyntaxError: Unexpected token '<'

这个错误的核心原因是浏览器无法直接解析.vue单文件组件——.vue文件包含模板、脚本、样式混合语法，必须通过Vue构建工具（Vite或Vue CLI）编译成浏览器能识别的标准JS/CSS文件后，才能在Django模板中引入。

下面是具体的集成步骤：

1. 初始化Vue项目（未创建则执行） #

在项目根目录外或专门的前端目录（如frontend/）执行：

# 用Vite创建Vue项目，按需选择Vue 3或Vue 2模板
npm create vite@latest frontend -- --template vue
cd frontend
npm install

2. 配置Vue打包路径 #

修改Vue项目根目录下的vite.config.js（若用Vue CLI则修改vue.config.js），将打包产物输出到Django可访问的静态目录：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    // 打包到Django项目的static/vue-dist目录
    outDir: '../your_django_project/static/vue-dist',
    // 资源路径设为相对路径，适配Django静态文件规则
    assetsDir: './',
    base: '/static/vue-dist/'
  }
})

替换your_django_project为你的Django项目实际名称。

3. 编译Vue项目 #

在Vue项目目录执行打包命令，生成浏览器可识别的资源：

npm run build

执行后，Django的static/vue-dist目录会生成index.html、assets/等编译好的文件。

4. 在Django模板中引入编译后的资源 #

禁止直接引入.vue文件，改为引入打包后的JS和CSS：

{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue + Django</title>
  <!-- 引入打包后的CSS -->
  <link rel="stylesheet" href="{% static 'vue-dist/assets/index.css' %}">
</head>
<body>
  <!-- Vue应用挂载节点 -->
  <div id="app"></div>
  <!-- 引入打包后的JS -->
  <script type="module" src="{% static 'vue-dist/assets/index.js' %}"></script>
</body>
</html>

5. 正确使用自定义组件（如EventForm.vue） #

将EventForm.vue放在Vue项目的src/components/目录下，在入口组件（如src/App.vue）中注册使用：

<!-- src/App.vue -->
<template>
  <div>
    <EventForm />
  </div>
</template>

<script setup>
import EventForm from './components/EventForm.vue'
</script>

修改后重新执行npm run build，更新编译资源即可。

常见问题排查 #

• 确保Django的settings.py配置了正确的静态文件路径：

  STATIC_URL = '/static/'
  STATICFILES_DIRS = [
      BASE_DIR / "static",
  ]
  

• 所有Vue语法（模板、组件逻辑）必须放在Vue项目中编译，不要直接写在Django模板里。
• 若使用Vue 2，需改用Vue CLI构建，配置逻辑与Vite类似但文件命名不同。

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