在Django中通过Webpack引入Vue.js后无法使用Vue实例的问题

Let's work through your problems one by one—you've got a couple of small conflicts and configuration tweaks needed to get this running smoothly.

1. Fix the Global Vue Access Issue (ReferenceError: Can't find variable: Vue) #

Your main.js has an incorrect line trying to expose Vue to the global scope. The export keyword is for module exports, not attaching variables to the window object. Also, you're already importing Vue with import Vue from 'vue', so you don't need to require it again.

Update your main.js to properly expose Vue globally (if you plan to create a Vue instance directly in your Django template):

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' 

// Correctly mount Vue to the window object so your template's script can access it
window.Vue = Vue;
// Make sure Vuetify is registered globally for your template instance
Vue.use(vuetify);

Vue.config.productionTip = false

// Temporarily comment this out—we'll address the mounting conflict next
// new Vue({
//   render: h => h(App),
//   vuetify,
// }).$mount('#app')

2. Resolve Vue Instance Mounting Conflict #

Right now you're trying to do two conflicting things:

• Mounting the App.vue component to #app via main.js
• Creating a separate Vue instance in your Django template's <script> tag, also targeting #app

You need to pick one approach—here are your two options:

Option A: Use a Custom Vue Instance in the Django Template (Quick Fix) #

If you want to keep writing Vue code directly in your template:

• Keep the updated main.js above (with the component mount commented out)
• Your Django template can stay mostly the same, but ensure {% verbatim %} wraps any Vue interpolation to avoid Django template parsing conflicts:

{% 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!'
  },
  vuetify: new Vuetify() // Initialize Vuetify for this instance
})
</script>
</body>
</html>

Option B: Use App.vue Component (Recommended for Scalable Projects) #

This is the standard Vue project structure and avoids mixing template syntaxes:

• Restore the component mount in main.js:

import Vue from 'vue'
import App from './App.vue'
import vuetify from '@/plugins/vuetify' 

Vue.config.productionTip = false

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

• Simplify your Django template to just the container (all content lives in App.vue):

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<div id="app"></div> <!-- Vue will inject App.vue content here -->
{% render_bundle 'main' %}
</body>
</html>

• Update App.vue to include your content:

<template>
  <v-app>
    {{ message }}
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

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

This error usually stems from:

• A version mismatch between Vue and Vuetify (make sure you're using Vue 2 with Vuetify 2.x, since your code uses the Vue 2 new Vue() syntax)
• Mixed template interpolation (Django trying to parse Vue's {{ }} before Vue loads)

Using Option B above will eliminate the interpolation conflict entirely. If you stick with Option A, ensuring {% verbatim %} wraps all Vue interpolations should resolve this. Also double-check your plugins/vuetify.js is correctly initializing Vuetify:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  // Add any Vuetify config here (e.g., theme settings)
})

After making these changes, clear your browser cache and reload the page—your Vue instance should render correctly!

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