Vue挂载目标#app找不到：custom-vue.js应放置在何处？

问题背景 #

在Django项目中，将<script src="{% static 'js/custom-vue.js' %}"></script>放在master.html的<head>标签内，但Vue挂载目标#app位于profile.html的content区块中，导致出现挂载目标找不到的错误。

解决方案 #

有两种可行的位置调整方案：

方案1：将脚本移到master.html的body结束标签前 #

修改master.html，把custom-vue.js的引用移到</body>之前，确保DOM完全渲染后再执行Vue初始化：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Profile</title>  
    {% load bootstrap4 %}
    {% bootstrap_css %}
    {% bootstrap_javascript jquery='full' %}

    <script src="{% static 'js/vue.global.js' %}"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    
</head> 

<body>
    <div class="container">
        {% block content %}{% endblock %}
    </div>

    <!-- 移到此处 -->
    <script src="{% static 'js/custom-vue.js' %}"></script>
</body>
</html>

方案2：仅在profile.html中引入脚本（推荐） #

如果只有profile.html需要这个Vue实例，直接在profile.html的content区块末尾、{% endblock %}之前添加脚本引用：

{% extends 'users/master.html' %}

{% block title %}
Profile Page
{% endblock %}

{% block content %}
<!-- 原有的content内容 -->
    </div> <!-- end of app  -->
    
<hr>

</div>

<!-- 添加脚本引用 -->
<script src="{% static 'js/custom-vue.js' %}"></script>
{% endblock %}

错误原因 #

浏览器按顺序解析HTML：<head>中的脚本会在<body>内容渲染前执行，此时#app元素还未被渲染到DOM中，Vue无法找到挂载目标，因此抛出错误。将脚本移到DOM元素之后，就能确保执行时#app已经存在。

额外优化建议 #

如果需要保留脚本在<head>中的位置，可以通过监听DOMContentLoaded事件延迟Vue初始化，修改custom-vue.js：

document.addEventListener('DOMContentLoaded', function() {
  const app = new Vue({
    el: '#app',
    // 原有的data、created、methods等内容
  });
});

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