Vue.js应用绑定Django模板无内容显示且无报错问题求助

问题排查及解决方法 #

1. 资源加载顺序错误 #

你当前将{% render_bundle 'product-filter-app' %}放在了DOM节点之前执行，JS运行时#product-filter-app元素还未被浏览器渲染，Vue挂载找不到目标节点，就会出现空白无报错的情况。
解决方法：将JS资源加载代码移到对应DOM节点的后面，修改后的Django模板代码如下：

{% load render_bundle from webpack_loader %}

{% block section_more %}
<section id="section_more" class="guide_section">
    <div id="product-filter-app"></div>
</section>
<!-- JS资源移到DOM节点之后加载 -->
{% render_bundle 'product-filter-app' %}
{% endblock %}

你可以在main.js开头加一行console.log(document.getElementById('product-filter-app'))验证，如果输出为null就确定是加载顺序问题。

2. Vue实例未配置渲染入口 #

你当前的Vue实例仅注册了ProductFilterApp组件，没有指定要渲染该组件，自然不会输出对应内容。
解决方法：给Vue实例新增render函数指定渲染目标，修改后的main.js代码如下：

import Vue from 'vue'
import * as Sentry from '@sentry/browser'
import 'vue-select/dist/vue-select.css'
import ProductFilterApp from './ProductFilterApp'
import { sentryOptions } from '@/utils/settings'
if (process.env.VUE_APP_MODE !== 'dev') {
  Sentry.init(sentryOptions)
}
new Vue({
  // 新增render函数，直接渲染目标组件
  render: h => h(ProductFilterApp)
}).$mount('#product-filter-app')

可选兼容配置（后续开发可能用到） #

如果后续你在Vue模板中使用{{ }}语法渲染变量，会和Django模板的变量语法冲突，可在Vue实例中自定义分隔符避免冲突：

new Vue({
  delimiters: ['${', '}'], // 把Vue变量语法改成${变量名}的格式
  render: h => h(ProductFilterApp)
}).$mount('#product-filter-app')

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