【前端问题精选】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>

回答:

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

回答:

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

以上是 【前端问题精选】TS文件引入vue文件在Vscode报错「找不到模块」如何解决? 的全部内容, 来源链接: www.h5w3.com/134346.html

回到顶部