Laravel Mix项目全局注册vue2-dropzone无效，局部导入正常问题咨询

Let's break down why your global registration isn't taking effect, and how to fix it:

The Root Cause #

The error Uncaught ReferenceError: vueDropzone is not defined happens due to a conflict between your global component setup and the code in your CreatePersonalExpense.vue component:

1. Local component declaration without importing
   In your component's script section, you’ve added:

   components: { vueDropzone }
   

   This tells Vue you want to use a local component named vueDropzone, but since you haven’t imported it in this file, the variable vueDropzone doesn’t exist here. Worse, this local declaration overrides the global component registration—Vue prioritizes local component definitions over global ones, so it completely ignores your global setup.

2. Double-check loading order (just to be safe)
   Ensure bootstrap.js loads before you initialize your main Vue instance and router in app.js. A standard Laravel setup has app.js importing bootstrap.js first:

   // app.js
   require('./bootstrap');
   
   // Then initialize Vue, router, etc.
   import Vue from 'vue';
   import VueRouter from 'vue-router';
   // ... rest of your setup
   

   If bootstrap.js runs after your Vue instance is created, the global component won’t be registered in time for your route components.

Fixes to Try #

Fix 1: Remove the local component declaration #

Since you’ve already registered vueDropzone globally in bootstrap.js, you don’t need to declare it again in your component. Just delete this line:

components: { vueDropzone }

Your component will automatically use the globally registered vueDropzone, and the error should disappear.

Here’s your corrected component code:

<template>
  <div class="form-row py-2">
    <div class="col-md-12">
      <h4>Upload</h4>
      <vue-dropzone v-on:vdropzone-sending="sendingFiles" id="drop1" ref="myVueDropzone" @vdropzone-complete-multiple="afterAllFilesUploaded" :options="dropOptions"></vue-dropzone>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      type: "personal",
      id: "",
      total: "",
      files: { },
      dropOptions: {
        url: '/api/expenses/files',
        autoProcessQueue: false,
        uploadMultiple: true,
        headers: {
          "x-csrf-token": document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        params: {}
      },
      errors: new Errors(),
      form: new Form(),
    }
  }
}
</script>

Fix 2: Verify global registration is working #

To confirm your global registration is active, add this line to app.js (after importing bootstrap.js) and check your browser console:

console.log(Vue.options.components);

You should see vueDropzone listed in the output—this confirms the component is registered globally.

Why Local Import Works #

When you add import vueDropzone from "vue2-dropzone"; to your component, you define the vueDropzone variable locally, making the components: { vueDropzone } declaration valid. Vue uses this local component instead of the global one, which is why it works—but this defeats the purpose of global registration.

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