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.ts
和tsconfig.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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
将
shims-vue.d.ts
中的下列代码写在新文件:重启Vscode即可。
错误的原因无法确定,希望补充。
但是我把错误定位到
shims-vue.d.ts
引入了两次vue,导致下面的第二次引入发生错误。在UserList的组件中加入下方代码
虽然这样写能解决报错的问题, 但是没有办法快速跳转到对应的文件中, 对此问题有解决办法嘛
我也遇到这个问题,解决了么