如何从单个Vue组件中导出interface并在其他组件中正常引入使用？

可以实现，你遇到的IDE不报错但构建报错是打包工具的类型处理配置问题导致的。

IDE的本地TypeScript语言服务会全量扫描所有文件的语法内容，可以识别到你在.vue文件中定义的具名导出接口；但生产构建阶段的TypeScript校验、类型导出流程，默认不会处理单文件组件(SFC)中的非默认导出类型，所以会提示找不到对应接口。

• 方案1：调整配置适配现有写法
  1. 检查tsconfig.json的include配置，确保包含所有.vue文件，示例配置：

  {
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
  }
  

  2. 如果使用Vite构建，安装vite-plugin-vue-type-imports插件并在vite.config.ts中注册，即可识别SFC中的类型导出。
  3. 如果使用Vue CLI构建，升级@vue/cli-plugin-typescript到最新版，同时在vue.config.js中设置parallel: false关闭多进程打包，避免类型导出丢失。
• 方案2：更推荐的规范写法（无配置兼容问题）
  把公共类型单独抽离到独立的TS类型文件中统一管理，不需要修改任何构建配置即可直接使用，也方便后续全局维护类型定义。
  示例操作：
  1. 新建src/types/channel.ts文件，写入接口定义：

  export interface OChannelsFilterFormForm {
      filterBy: {
        youCreated: boolean,
        youCanAddTo: boolean,
        hideType: string
      },
      sortBy: string
  }
  

  2. 在原组件和需要导入该接口的其他组件中，直接导入即可使用：

  import { OChannelsFilterFormForm } from '@/types/channel'
  

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