nuxt.js 使用 Typescript 在 VSCode 报错: File 'xxx/components/Logo.vue' is not a module. Vetur(2306)
nuxt.js 生成的默认文件 components/Logo.vue 源码大概如下:
1 <template> 2 <svg 3 class="NuxtLogo" 4 > 5 </svg> 6 </template> 7 <style> 8 .NuxtLogo { 9 margin: auto; 10 } 11 </style>
在 page/index.vue 文件中引入 `import Logo from '~/components/Logo.vue';` 会报错:`File 'xxx/components/Logo.vue' is not a module. Vetur(2306)`。
typescript 提示新增 vue-shims.d.ts ( https://github.com/Microsoft/TypeScript-Vue-Starter#single-file-components ),试过还是不行。
github issue 翻了一下,最后找到这个:https://github.com/vuejs/vetur/issues/1709
给 components/Logo.vue 添加 export 即可:
1 <template> 2 <svg 3 class="NuxtLogo" 4 > 5 </svg> 6 </template> 7 <style> 8 .NuxtLogo { 9 margin: auto; 10 } 11 </style> 12 <script lang="ts"> 13 import Vue from 'vue'; 14 15 export default Vue.extend({ 16 name: 'LOGO', 17 }); 18 </script>
添加之后,还需关闭重启 VSCode !