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

发布于 2022-09-11 21:58:34 字数 1977 浏览 15 评论 0

我是通过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"]
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

吃素的狼 2022-09-18 21:58:34

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,导致下面的第二次引入发生错误。

旧人九事 2022-09-18 21:58:34

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

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';    
    @Component
    
    export default class UserList extends Vue { }
</script>
给不了的爱 2022-09-18 21:58:34

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

顾冷 2022-09-18 21:58:34

我也遇到这个问题,解决了么

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文