Django项目中CDN引入Vue脚本未生效问题求助

核心问题不是CDN引入Vue的方式不被Django支持，而是Django模板引擎和Vue的模板语法冲突，同时你的CDN引入代码还有个小格式错误：

问题1：语法冲突 #

Django和Vue默认都用{{ }}作为变量插值符号。当Django渲染模板时，会先解析{{notice}}，但你的Django上下文里并没有notice这个变量，所以它会把这个占位符替换成空字符串，导致Vue拿到的DOM里已经没有{{notice}}了，自然无法渲染出内容。

问题2：CDN脚本加载格式错误 #

你写的CDN引入代码里，<scriptsrc=缺少了空格，应该是<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>，空格缺失可能导致浏览器无法正确识别脚本标签，进而加载失败。

解决方法 #

方法1：修改Vue的插值分隔符 #

在Vue实例里配置自定义分隔符，避开Django的{{ }}：

const { createApp, ref } = Vue

createApp({
  delimiters: ['[[', ']]'], // 改成双中括号作为Vue的插值符号
  setup() {
    const notice = ref('Hello vue!')
    return {
      notice
    }
  }
}).mount('#app')

对应的模板部分改成：

<div id="app">[[notice]] something</div>

方法2：用Django的verbatim标签跳过解析 #

如果你不想改Vue的语法，可以用Django的{% verbatim %}标签包裹Vue的变量，让Django不解析这段内容：

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

方法3：确保脚本加载顺序正确 #

把Vue的CDN脚本放在你的自定义Vue代码之前，确保Vue全局对象已经加载完成再执行你的代码，比如：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp, ref } = Vue
  // ... 你的Vue代码
</script>

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