VueJS集成Django遇Webpack问题：无法加载指定Vue模板应用求助

First, let's get your second Vue app (App02.vue) displaying correctly. Here's what's going wrong and how to fix it:

1. Create a Separate Entry File for App02 #

Your current main.js is hardcoded to render App.vue—so even if you bundle it under a different name, it's still loading the first app. Let's make a new entry file called main02.js in your Vue source directory:

import Vue from "vue/dist/vue.js";
import Vuex from "vuex";
import storePlugin from "./vuex/vuex_store_as_plugin";
import App02 from './App02.vue'

Vue.use(Vuex);
Vue.use(storePlugin);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App02),
}).$mount('#app02');

This file mirrors main.js but targets App02.vue and mounts it to the #app02 DOM element (which matches the root div in App02.vue).

2. Update Webpack Config to Support Multiple Entry Points #

You need to tell Webpack to build two distinct bundles: one for each Vue app.

If you're using Vue CLI, add a pages section to your vue.config.js:

module.exports = {
  pages: {
    vue_app: {
      entry: 'src/main.js', // Entry for first app
      chunks: ['chunk-vendors', 'vue_app']
    },
    vue_app_02: {
      entry: 'src/main02.js', // Entry for second app
      chunks: ['chunk-vendors', 'vue_app_02']
    }
  }
};

If you're using a custom Webpack config, adjust your entry object:

module.exports = {
  entry: {
    vue_app: './src/main.js',
    vue_app_02: './src/main02.js'
  },
  // ... rest of your config
};

This ensures Webpack outputs separate bundles for each app.

3. Fix the Django Template #

Your template currently uses the wrong DOM element and loads the incorrect bundle. Update it to match App02's setup:

{% load render_bundle from webpack_loader %}
{% block content %}
<h3>My second Vue app goes here</h3>
<div id="app02"></div> <!-- Matches the root div in App02.vue -->
{% render_bundle 'chunk-vendors' %}
{% render_bundle 'vue_app_02' %}
{% endblock %}

Now when you rebuild and reload your page, the second app should render correctly.

Clarifying Key File Roles #

Let's break down the purpose of each file in your setup:

• main.js / main02.js: These are the entry points for your Vue applications. They initialize Vue, set up plugins (like Vuex), import the root component of your app, and mount that component to a specific DOM element. Each separate Vue app on your Django site needs its own entry file.

• App.vue / App02.vue: These are the root components of each Vue app. They define the template (HTML structure), script (JavaScript logic, component imports), and styles for the top-level component that Vue renders into the DOM. Think of them as the "starting point" for your app's UI and logic.

• index.js: In standard Vue CLI projects, this is often used as the entry point instead of main.js, but it serves the same bootstrapping purpose. In your case, since you're using main.js, you don't need index.js unless you want to restructure your project to follow that convention.

• index.html: In standalone Vue apps, this is the base HTML file that includes the root div where Vue mounts and loads the bundled JS. Since you're using Django, you're replacing this with Django's template files—these handle your site's HTML structure and load the Webpack bundles using the {% render_bundle %} tag.

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