Laravel8.4+Vue2开发自定义插件报Vue is not defined解决方法

• 基于Webpack等构建工具的ES模块/CommonJS模块都有独立的文件作用域，你在app.js中导入的Vue变量不会自动泄露到plugin.js的作用域内，因此plugin.js中直接执行Vue.use(Plugin)时，当前作用域找不到Vue的声明，直接抛出Vue is not defined的引用错误。
• 之前尝试在plugin.js中直接import Vue触发其他报错，通常是导入路径和app.js中导入Vue的路径不一致，导致打包时引入了两份独立的Vue副本，插件挂载到了未被项目实际使用的Vue实例上，后续组件调用全局方法时会报方法不存在的错误。

1. 修改plugin.js，移除文件内的Vue.use(Plugin)调用，仅导出插件对象：

const Plugin = {
  install(Vue, options) {
    Vue.prototype.toTitleCase = (str) => {
      return str.split(' ')
        .map(w => w[0].toUpperCase() + w.substring(1).toLowerCase())
        .join(' ');
    }
  },
}

export default Plugin;

2. 修改app.js，导入插件后使用当前文件已实例化的Vue完成注册：

import Vue from 'vue';
import Plugin from './plugin.js';

// 注册自定义插件
Vue.use(Plugin);

// 后续原有Vue根实例初始化、组件挂载等代码保持原有逻辑即可

这种写法完全避免了多Vue实例的冲突问题，所有插件都在入口文件统一注册，后续维护也更清晰。

如果一定要在plugin.js内部完成注册逻辑，需要保证导入Vue的路径和app.js中的导入路径完全一致，避免引入多副本：

// plugin.js
// 导入路径必须和app.js中import Vue的路径完全相同
import Vue from 'vue';
const Plugin = {
  install(Vue, options) {
    Vue.prototype.toTitleCase = (str) => {
      return str.split(' ')
        .map(w => w[0].toUpperCase() + w.substring(1).toLowerCase())
        .join(' ');
    }
  },
}

Vue.use(Plugin);

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