Vue3从Vue CLI迁移至Vite时报default属性解构错误如何解决

Uncaught (in promise) TypeError: Cannot destructure property 'default' of 'undefined' as it is undefined.

该报错本质是导入的模块返回值为undefined，Vue内部读取模块默认导出的default属性时解构失败，通常由Vue CLI迁移到Vite后的2个配置差异导致：

• 导入Vue单文件组件未显式加.vue后缀：Vue CLI基于Webpack构建，默认配置了扩展名自动补全规则，允许省略.vue后缀导入SFC；但Vite默认不会自动补全.vue后缀，你代码中的import ProjectList from '@/components/ProjectList';没有加后缀，导致Vite无法匹配到对应的文件，导入结果为空。
• @路径别名未在Vite中配置：Vue CLI默认内置了@指向项目src目录的别名配置，而Vite需要手动配置别名才能识别@开头的导入路径，别名缺失会导致路径解析失败，模块导入结果为undefined。

1. 优先修改导入语句，补全.vue后缀即可快速解决绝大多数同类问题：

// 修改前
import ProjectList from '@/components/ProjectList';
// 修改后
import ProjectList from '@/components/ProjectList.vue';

2. 如果补全后缀后仍报错，检查vite.config.js文件，确保已经配置了@别名：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

3. 如果你希望保留之前省略.vue后缀的开发习惯，可以在vite.config.js的resolve.extensions配置中添加.vue（不推荐，会降低IDE类型提示精度和Vite的构建扫描效率）：

export default defineConfig({
  // 其他配置保持不变
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  }
})

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