终极解决TS 或者 Vetur 报错，Cannot find module ‘@/xx/xxx‘，找不到*.vue 等编译问题

报错详情：类似于

// 编译器报错：
Cannot find module '@/xx/xxx' or its corresponding type declarations.Vetur(2307)

// 编译器报错：
找不到模块“XXX.vue”或其相应的类型声明。ts(2307)

// 或者 控制台报错 this.$router 等

解决方案配置：

// tsconfig.json
{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true, // js/ts 混用时设为false
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "noImplicitThis": true, // js/ts 混用时设为false
        "baseUrl": ".",
        "types": ["webpack-env"],
        "paths": {
            "@/*": ["src/*"]
        },
        "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
    },
    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src", "src/typings/*.d.ts"],
    "exclude": ["node_modules"]
}

// jsconfig.json (混用才需要)
{
    "compilerOptions": {
        "experimentalDecorators": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    }
}

// src/typings/shims-vue.d.ts
import VueRouter from 'vue-router';
import { Route } from 'vue-router';
import { Store } from 'vuex';
declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter;
    $route: Route;
    $store: Store<any>;
  }
}


// src/shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

declare module 'store';

最重要，重启VSCODE，重新打开项目

---

码字不易，觉得有帮助的小伙伴记得点个赞鼓励下~

扫描上方二维码关注我的订阅号~