时间戳

首页 > 解决方案 > 无法使用来自 django 的 vue.js

django - 无法使用来自 django 的 vue.js

问题描述

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

查看 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')

标签： djangovue.jswebpack

解决方案

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

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

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

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

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

推荐阅读