vue中使用typescript问题解决方案集锦

typescript

本文环境

  1. @vue/cli 4.3.1
  2. typescript 3.9.5

相关配置文件

  1. vue.config.js
  2. tsconfig.json
  3. shims-vue.d.ts

问题汇总

导入 vue 文件报错

错误信息：Cannot find module ‘./App.vue’ or its corresponding type declarations
解决方案：修改shims-vue.d.ts

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

Vscode 报错，编译不报错

解决方案：重启 Vscode

挂载原型$api 报错

解决方案：在src目录下新增vue-property.d.ts

import Vue from 'vue'
declare module "vue/types/vue" {
  interface Vue {
    $api: any;
  }
}

无法使用@components别名 alias 路径

解决方案: 修改tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env", "vuex"],
    "paths": {
      "@/*": ["src/*"],
      "@/components": ["src/components"] // 添加这一行
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

版权声明: （https://www.thinkmoon.cn/post/876）
本文首发于指尖魔法屋-vue中使用typescript问题解决方案集锦
转载或引用必须申明原指尖魔法屋来源及源地址！