如何在Django项目中集成Vue.js？CDN方式报错求助

问题根源很明确：Django模板引擎和Vue都使用{{ }}作为插值语法，Django会优先解析页面中的{{ message }}，把它当成自己的模板变量处理——因为你没在Django的上下文里传message变量，所以渲染后的页面里这段内容会变成空字符串。Vue挂载时找不到有效的模板内容，就会抛出"Component is missing template or render function"的警告，最终页面无内容。

这种用Vue CDN直接集成到Django模板的方式完全可行，解决冲突有两种常用方案：

方案一：修改Vue的插值分隔符 #

在Vue实例配置里自定义一套和Django不冲突的分隔符，比如[[ ]]：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">[[ message ]]</div>

    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    message: 'Hello Vue!'
                }
            },
            delimiters: ['[[', ']]'] // 自定义Vue插值分隔符
        }).mount('#app')
    </script>
</body>
</html>

方案二：用Django的verbatim标签包裹Vue内容 #

告诉Django不要解析指定区域的模板语法，直接原封不动输出内容给Vue：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
        {% verbatim %}
            {{ message }}
        {% endverbatim %}
    </div>

    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    message: 'Hello Vue!'
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

如果整个#app容器里都是Vue的内容，也可以把整个容器包裹在{% verbatim %}和{% endverbatim %}之间，更简洁。

两种方案都能解决语法冲突问题，根据你的习惯选择即可，对于学校项目的快速开发需求来说，这两种方法都足够高效。

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