Vue-cli构建失败：Vue 2.6.11项目遇4个TypeScript编译错误求助

针对你当前版本组合出现的构建TS错误，给出以下针对性解决步骤：

1. 匹配Vue类型依赖版本 #

TypeScript 2.9.x对Vue的类型定义兼容性要求严格，必须安装与Vue 2.6.11匹配的类型依赖：

npm install @vue/typescript@2.6.x --save-dev
# 若项目使用类组件语法，同步安装对应版本的vue-property-decorator
npm install vue-property-decorator@8.x --save-dev

2. 修正tsconfig.json配置 #

确保tsconfig.json包含适配当前版本的关键配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["vue", "node"],
    "paths": { "@/*": ["src/*"] },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

3. 补全Vue单文件组件类型声明 #

在项目src目录下创建vue-shims.d.ts文件，解决.vue文件的类型识别问题：

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

4. 清理依赖冲突 #

执行命令检查依赖树，排查嵌套版本冲突：

npm ls typescript vue @vue/typescript

若发现冲突，删除依赖缓存后重装：

rm -rf node_modules package-lock.json
npm install

5. 针对性修复具体报错 #

从截图报错特征来看，多为类型不兼容、属性未定义问题：

• 组件需通过Vue.extend()或@Component（类组件）规范定义，避免直接创建实例导致类型推断失败
• 第三方库类型缺失时，安装对应@types/xxx包，或在vue-shims.d.ts中临时添加类型声明

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