无法使用来自 django 的 vue.js答案

【问题标题】：Can't use vue.js from django无法使用来自 django 的 vue.js
【发布时间】：2020-04-27 00:08:00
【问题描述】：

我在django 中使用webpack 介绍了vuejs，但我不能使用django 模板中的vue 实例。

查看chrome devtool，转译的js加载正确，但显示{{message}}。

chrome devtool的控制台输出如下信息。

TypeError: undefined is not an object (evaluating 'hasOwnProperty.call (it, key)')

ReferenceError: Can't find variable: Vue

这是我的代码。

main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

window.Vue = require('vue');
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  vuetify,
}).$mount('#app')

html

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Example</title>
  </head>

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

  {% render_bundle 'main' %}
  <script>
  var app = new Vue({
  el: '#app',
  data: {
  message: 'Hello Vue!'
  }
  })
  </script>
  </body>
</html>

log(django)

django        | [09/Jan/2020 11:22:58] "GET /vue/ HTTP/1.1" 200 374
django        | [09/Jan/2020 11:22:58] "GET /static/webpack_bundles/main-ccb1054f18bba9ee992d.js HTTP/1.1" 304 0

urls.py

from django.urls import path
from .views import signupfunc, loginfunc, listfunc, logoutfunc, vuefunc

urlpatterns = [
    path('signup/', signupfunc, name='signup'),
    path('login/', loginfunc, name='login'),
    path('list/', listfunc, name='list'),
    path('logout/', logoutfunc, name='logout'),
    path('vue/', vuefunc, name='vue'),
]

vies.py

<snip>

def vuefunc(request):
    return render(request, 'vue.html')

【问题讨论】：

@Parth Pandya 谢谢！！

标签： django vue.js webpack

【解决方案1】：

这可能是一个愚蠢的问题，但您是从模板中导入main.js 文件吗？它看起来像这样：

<script src="{% static 'js/main.js' %}"></script>

另外，顺便说一句，我将 Vue 与 django 一起使用，并且总是在 Vue 代码中列出我自己的分隔符，因此我不必在每个变量周围放置 {% verbatim %} 标记。它看起来像这样：

var app = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    message: 'Hello Vue!'
  }
})

你显然可以选择你想要的任何分隔符。

【讨论】：