Vue3 Options API项目接入TypeScript的tsconfig配置冲突问题

正在给一个基于Options API的大型Vue3项目接入TypeScript，项目能正常运行并在浏览器中展示，但遇到一处配置冲突问题：

• 根目录tsconfig.json引用tsconfig.app.json时，报错：Referenced project ... may not disable emit
• 若在tsconfig.app.json的compilerOptions中设置"noEmit": false，根目录的错误消失，但tsconfig.app.json会出现新错误：Option 'allowImportingTsExtensions' can only be used when either 'noEmit' or 'emitDeclarationOnly' is set
• 未手动配置allowImportingTsExtensions选项，且当前已设置noEmit，该错误不符合预期

相关配置文件 #

tsconfig.json #

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

tsconfig.app.json #

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "outDir": "./wwwroot/dist",
    "allowJs": true,
    "strict": false,
    "noEmit": false,
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

项目依赖版本 #

• Vue版本：3.5.6
• devDependencies：

"devDependencies": {
    "@tsconfig/node20": "20.1.4",
    "@types/node": "22.9.0",
    "@vitejs/plugin-vue": "5.2.0",
    "@vue/tsconfig": "0.6.0",
    "rollup-plugin-copy": "3.5.0",
    "sass": "1.79.1",
    "typescript": "5.6.3",
    "vite": "5.4.11",
    "vite-plugin-vue-devtools": "7.6.4",
    "vue-tsc": "2.1.10"
}

解决方案 #

问题根源是@vue/tsconfig/tsconfig.dom.json的默认配置中开启了allowImportingTsExtensions，该选项仅允许在noEmit或emitDeclarationOnly开启时使用；而根目录tsconfig.json引用子项目时，要求composite类型的子项目不能完全禁用emit（即noEmit: true会触发报错）。以下两种方案可解决冲突：

方案1：显式关闭allowImportingTsExtensions #

在tsconfig.app.json的compilerOptions中添加配置，覆盖继承的默认值：

"allowImportingTsExtensions": false

方案2：使用emitDeclarationOnly替代noEmit #

将tsconfig.app.json中的"noEmit": false替换为：

"emitDeclarationOnly": true

此配置会让TypeScript仅生成类型声明文件，既满足composite项目不能完全禁用emit的要求，又符合allowImportingTsExtensions的使用条件。

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