Django集成Vue.js问题：前端Vue组件无法显示如何解决？

我帮你梳理下Django集成Vue.js组件不显示的常见排查点，一步步来解决问题：

1. 确认Django后端数据接口是否正常 #

首先要确保你的games视图能正确返回可被Vue解析的JSON数据：

调整视图函数（views.py） #

如果还没做序列化处理，修改games函数：

from django.http import JsonResponse
from .models import Games

def games(request):
    # 将Games模型数据转为可JSON序列化的列表
    # 若用Django REST Framework，也可以用ModelSerializer更规范
    games_data = list(Games.objects.values())
    return JsonResponse(games_data, safe=False)

配置路由（urls.py） #

在homepage应用的urls.py中添加接口路由：

from django.urls import path
from . import views

urlpatterns = [
    # 首页路由（用来渲染Vue模板）
    path('', views.index, name='homepage-index'),
    # 游戏数据接口
    path('api/games/', views.games, name='games-api'),
]

主项目的urls.py要包含homepage的路由：

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

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

验证接口有效性 #

直接在浏览器访问http://localhost:8000/api/games/，如果能看到返回的JSON格式游戏数据，说明后端接口没问题。

2. 检查Vue组件的初始化与挂载 #

确保你的Django模板正确引入Vue、挂载容器和数据请求逻辑：

编写Django模板（index.html） #

在homepage/templates/homepage/index.html中写入以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Games List</title>
    <!-- 引入Vue库（这里用Vue 2的CDN，若用Vue 3需调整语法） -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入axios用于请求后端数据 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <!-- Vue挂载容器，id要和Vue实例的el对应 -->
    <div id="game-app">
        <table>
            <tr>
                <td>Titre</td>
                <td>Nom</td>
            </tr>
            <!-- v-for必须添加唯一key，避免Vue警告 -->
            <tr v-for="game in liste" :key="game.id">
                <!-- 这里根据后端返回的数据结构调整取值：
                     若用values()返回，直接取game.titre；
                     若用DRF序列化器，可能是game.fields.titre -->
                <td>{{ game.titre }}</td>
                <td>{{ game.nom }}</td>
            </tr>
        </table>
    </div>

    <script>
        new Vue({
            el: '#game-app', // 与挂载容器id一致
            data() {
                return {
                    liste: [] // 初始化空数组存储游戏数据
                }
            },
            mounted() {
                // 页面加载完成后请求后端数据
                axios.get('/api/games/')
                    .then(response => {
                        this.liste = response.data;
                        // 控制台打印数据，确认是否成功获取
                        console.log('获取到的游戏数据:', this.liste);
                    })
                    .catch(error => {
                        console.error('请求数据失败:', error);
                    })
            }
        })
    </script>
</body>
</html>

添加模板渲染视图 #

在views.py中新增渲染模板的函数：

from django.shortcuts import render

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

3. 排查常见错误点 #

• 浏览器控制台报错：打开F12控制台，查看是否有Vue未加载、请求404、跨域或语法错误，这些是最直接的问题线索。
• v-for的key属性：Vue要求v-for循环必须绑定唯一key值，否则会影响渲染甚至报错。
• 数据结构匹配：如果后端用DRF的ModelSerializer返回数据，结构会是[{"id":1, "fields":{"titre":"xxx", "nom":"xxx"}}]，此时Vue中要写成game.fields.titre。
• Vue版本兼容性：如果用Vue 3，初始化语法是Vue.createApp({...}).mount('#game-app')，注意调整代码。

内容的提问来源于stack exchange，提问作者khadija.EL