详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因

前情提要

在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有export default ，在 <script setup> 中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用 export default 来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为 TypeScript 和 Vue 的默认导出行为在某些情况下不完全一致，特别是在与一些工具链（如 Vite、Webpack）和 TypeScript 配置一起使用时。

//当前文件引入
import  xxx from '@/components/a/b.vue'

//导出
<script setup lang="ts">

 解决方案

以下是我总结的集中解决方案，

1. 检查 TypeScript 配置

确保你的 tsconfig.json 文件配置正确，特别是 compilerOptions 部分的配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "jsx": "preserve",
    "jsxImportSource": "vue"
  }
}

//esModuleInterop 和 allowSyntheticDefaultImports 可以帮助处理默认导出的兼容性问题。

2. 检查 Vite 或 Webpack 配置

如果你使用的是 Vite 或 Webpack，确保它们的配置能够正确处理 Vue 文件。例如，对于 Vite，你需要确保你安装了 @vitejs/plugin-vue 插件并正确配置它。

npm install @vitejs/plugin-vue --save-dev

然后在 vite.config.ts 中配置插件：

import { defineConfig } from 'vite'; 
import vue from '@vitejs/plugin-vue'; 
export default defineConfig(
{ 
    plugins: [vue()] 
});

3. 使用 import 的具体方式

尝试使用 Vue 3 的默认导入方式，如果默认导出失败，可以使用 import * as 语法：

import * as xxx from '@/components/a/b.vue';

或者，如果 b.vue 文件没有默认导出，你可以显式地从该文件中导出组件：

// b.vue 
<script setup lang="ts">
 export default defineComponent({ 
// 组件配置 
});
</script>

然后在导入时使用：

import selectMultDown from '@/components/a/b.vue';