如何使用require.js正确加载Vue.js及自定义Vue组件库？

这个错误很典型——你的myWidget组件在加载时找不到可用的Vue实例，所以调用Vue.extend时才会抛出“Cannot read property 'extend' of undefined”的错误。核心问题是组件库的依赖声明和Require.js的加载逻辑没匹配上，给你几个靠谱的解决思路：

1. 确保组件库编译为UMD格式并正确声明Vue外部依赖 #

如果是用Vue CLI打包组件库，一定要把输出配置成UMD格式（它兼容AMD、CommonJS和全局变量，完美适配Require.js），同时把Vue标记为外部依赖（避免把Vue打包进组件库，让Require.js去管理它）。

在你的vue.config.js里添加这些配置：

module.exports = {
  configureWebpack: {
    output: {
      // 声明组件库的全局名称
      library: 'myWidget',
      // 输出为UMD格式
      libraryTarget: 'umd',
      // 为AMD模块指定名称，方便Require.js识别
      umdNamedDefine: true
    },
    externals: {
      // 把Vue标记为外部依赖，适配不同环境的映射关系
      vue: {
        root: 'Vue',
        commonjs: 'vue',
        commonjs2: 'vue',
        amd: 'vue'
      }
    }
  }
}

重新打包后，你的组件库就能正确识别Require.js传入的Vue依赖了。

2. 配置Require.js的路径映射 #

在加载脚本前，先通过require.config指定Vue和组件库的正确路径，确保Require.js能找到它们：

require.config({
  paths: {
    // 可以用CDN或者本地的Vue文件，注意选择UMD版本的Vue（比如vue.min.js）
    'vue': 'https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min',
    // 指向你打包后的组件库UMD文件路径
    'myWidget': '/path/to/your/myWidget.umd.min'
  }
});

// 然后执行你的加载代码
require(['vue', 'myWidget'], function (Vue, myWidget) {
  console.log('Loaded!');
  // 这里可以正常使用Vue和组件，比如全局注册组件
  Vue.component('my-widget', myWidget);
});

3. 应急方案：手动确保Vue全局可用 #

如果暂时没法重新打包组件库，也可以先加载Vue并挂载到全局，再加载组件：

require(['vue'], function(Vue) {
  // 把Vue挂载到window，让后续加载的组件能找到它
  window.Vue = Vue;
  
  // 再加载组件库
  require(['myWidget'], function(myWidget) {
    console.log('Loaded!');
    // 正常使用组件逻辑
  });
});

这个方案比较临时，推荐优先用前两种符合规范的方式，避免全局变量污染。

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