在Vue.JS中使用TypeScript时，如何从导入中删除.vue扩展名？

Question

我使用vue-cli3创建了一个项目，并包含TypeScript

我的src / app.vue：

<template>
  <div id="app">
    <hello-world msg="test"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld';

@Component({
  components: { HelloWorld },
})
export default class App extends Vue {}
</script>

编译器在“找不到模块'@ / components / HelloWorld'”中引发错误；

组件HelloWorld存在。

但是，如果我删除lang="ts"或添加了.vue扩展名，那么一切都可以正常编译。在我的tsconfig.json中，我有

  "paths": {
    "@/*": [ "src/*" ]
  },

这是问题tsconfig.json还是其他？

Answer 1

这条线import HelloWorld from '@/components/HelloWorld';应该是import HelloWorld from '@/components/HelloWorld.vue。

因为编译器认为这@/components/HelloWorld是一个.tsor.js文件，但它并不存在。