Vue3迁移构建（TypeScript）报错：找不到Vue默认导出及extend未定义

问题描述 #

• 已按Migration Build官方文档完成配置，出现警告：export 'default' (imported as 'Vue') was not found in 'vue'
• 运行应用触发错误：Uncaught TypeError: Cannot read properties of undefined (reading 'extend')
• 已配置@vue/compat别名、compilerOptions的MODE为2，创建shims-vue-compat.d.ts，调整原Vue2类型文件后问题依旧
• 期望在兼容模式下继续使用Vue.extend，逐步迁移组件，但无法正常运行

解决方案 #

1. 确保别名配置全局生效 #

Vue CLI的别名配置需同时覆盖webpack和TypeScript的路径解析：

• 在vue.config.js中配置webpack别名：

  module.exports = {
    configureWebpack: {
      resolve: {
        alias: {
          'vue': '@vue/compat'
        }
      }
    },
    chainWebpack: config => {
      config.resolve.alias.set('vue', '@vue/compat')
    }
  }
  

• 在tsconfig.json中同步TypeScript路径配置：

  {
    "compilerOptions": {
      "paths": {
        "vue": ["node_modules/@vue/compat"]
      }
    }
  }
  

2. 修正TypeScript类型定义 #

• 保留shims-vue-compat.d.ts，确保内容正确：

  declare module 'vue' {
    import VueCompat from '@vue/compat'
    const Vue: typeof VueCompat
    export default Vue
    export * from '@vue/compat'
  }
  

• 移除原Vue2的shims-vue.d.ts，避免类型定义冲突；若需保留，需确保其定义不会覆盖@vue/compat的类型。

3. 正确配置compilerOptions的MODE #

MODE配置需在webpack的vue-loader中设置，而非tsconfig：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        return {
          ...options,
          compilerOptions: {
            mode: 2 // 启用Vue2兼容模式
          }
        }
      })
  }
}

4. Vue.extend平滑过渡方案 #

• Migration Build原生支持Vue.extend，无需一次性替换。若仍报错，检查入口文件的导入是否正确：

  import Vue from 'vue'
  // 此时Vue应为@vue/compat实例，包含extend方法
  

• 过渡策略：旧组件继续使用Vue.extend，新组件采用defineComponent编写，待所有组件迁移完成后关闭兼容模式。

5. TypeScript支持问题排查 #

• Migration Build对TypeScript完全兼容，问题多源于配置冲突或依赖版本不一致。执行以下步骤：
  • 删除node_modules和锁文件，重新安装依赖：rm -rf node_modules package-lock.json && npm install
  • 清除webpack缓存后运行：npm run serve --no-cache
  • 确保@vue/compat版本与Vue3核心版本完全一致

内容的提问来源于stack exchange，提问作者David W Gray