VSCode在编译时显示.vue导入的“无法找到模块”TS错误
简单地说，vscode在模块中显示了这个错误：
找不到模块“@/components/SidebarToggleIcon”
，但在编译过程中没有出现这样的错误。。
这是一个VueJS项目，而SidebarToggleIcon是一个在<script lang="ts">部分中带有TypeScript的.vue文件。这个错误在VSCode之前和编译期间都会出现，直到我添加了@vue/eslint-config-typescript包。现在只出现在VSCode上。
Sidebar.vue
<script lang="ts">
// [skip other imports]
import SidebarToggleIcon from '@/components/SidebarToggleIcon';
@Component
export default class LayoutSidebar extends Vue {
get sidebarCollapsed(): boolean {
return preferenceModule.sidebarCollapsed;
}
}
</script>SidebarToggleIcon.vue
<script lang="ts">
import Vue from 'vue';
import { getModule } from 'vuex-module-decorators';
import Component from "vue-class-component";
import PreferencesStore from '@/store/PreferencesStore';
const preferenceModule: PreferencesStore = getModule(PreferencesStore);
@Component
export default class SidebarToggleIcon extends Vue {
get sidebarCollapsed(): boolean {
return preferenceModule.sidebarCollapsed;
}
toggle(){
preferenceModule.ToggleSidebar();
}
}
</script>
为什么会这样呢？我该怎么解决这个问题？
编辑：--这是而不是--这是@别名的一个问题，这些问题得到了正确的解决(在屏幕截图中，错误使用它，而我在项目中使用它)，在使用相对路径时，这个错误仍然会出现。我的TSConfig有适当的"paths": { "@/*": ["src/*"] }项。如果这是问题，编译也会抛出此错误，但它不会抛出，这只存在于VSCode中。
回答 11
Stack Overflow用户
发布于 2019-07-24 15:00:21
在Sidebar.vue文件中，尝试在导入声明中添加".vue“扩展名，如下所示：
import SidebarToggleIcon from '@/components/SidebarToggleIcon.vue';Stack Overflow用户
发布于 2019-02-23 07:23:50
这是因为TypeScript不自动解析webpack别名。
要使TS解析别名，应在tsconfig.json中添加compilerOptions.paths下的别名。
{
"compilerOptions": {
"paths": {
"@/*": [
"./*"
]
}
}
}Stack Overflow用户
发布于 2022-01-21 14:59:53
对我来说，对于PhpStorm中的Vite & Vue 3项目来说，在src目录中创建一个shims文件就足够了。我的大部分组件只使用脚本设置。
src/shims-vue.d.ts
declare module '*.vue';https://stackoverflow.com/questions/54839057
复制相似问题
腾讯云开发者
