H5W3
当前位置:H5W3 > 其他技术问题 > 正文

TS文件引入vue文件在Vscode报错「找不到模块」如何解决?

我是通过Vue create创建的项目,使用了typescript + vue-property-decorator, 但是在ts文件引入的时候vscode提示出错,但是可以通过编译。
mian.ts

    import App from './App.vue';  // 找不到模块“./App.vue”。ts(2307)

router.ts

    const Index = () => import('./views/Index.vue');  // 找不到模块“./Index.vue”。ts(2307)

但是我在*.vue文件中引入就没有提示报错
User.vue


<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import UserList from '../components/lists/UserList.vue';

    @Component({
        components: {
            UserList
        }
    })
    export default class User extends Vue { }
</script>

我通过能搜索到的方法修改shims-vue.d.tstsconfig.json文件也并没有解决问题
shims-vue.d.ts

import Vue from 'vue';
import VueRouter from 'vue-router';
import { Route } from 'vue-router';
import { Store } from 'vuex';

declare module '*.vue' {
    import Vue from 'vue';
    export default Vue;
}
// 扩充
declare module 'vue/types/vue' {
    interface Vue {
        $router: VueRouter;
        $route: Route;
        $store: Store<any>;
        $api: any;
    }
}

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", "jest"],
        "paths": {
            "@/*": ["src/*"]
        },
        "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
    },
    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx", "src/assets/script/area.ts"],
    "exclude": ["node_modules"]
}

回答:

shims-vue.d.ts 中的下列代码写在新文件:

import Vue from 'vue';
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>;
        $api: any;
    }
}

重启Vscode即可。

错误的原因无法确定,希望补充。
但是我把错误定位到shims-vue.d.ts引入了两次vue,导致下面的第二次引入发生错误。

回答:

在UserList的组件中加入下方代码

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';    
    @Component
    
    export default class UserList extends Vue { }
</script>

回答:

虽然这样写能解决报错的问题, 但是没有办法快速跳转到对应的文件中, 对此问题有解决办法嘛

本文地址:H5W3 » TS文件引入vue文件在Vscode报错「找不到模块」如何解决?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址