在 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

在您的源根文件夹中，您可能有一个名为shims-vue.d.ts的文件，其内容如下：

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

这个文件的作用是告诉 Typescript 编译器所有以.vue结尾的文件都具有Vue类型。 否则，这些文件没有类型，Typescript 无法使用它们。

这就是你需要.vue扩展名的原因：如果你删除它，Typescript 不知道文件的类型并且无法编译。 因此，简而言之，答案是您无法删除扩展名。

更高级的答案：

从理论上讲，您可以删除扩展名，但您需要使用不同的表达式声明模块 shim。 例如，您可以告诉 Typescript 文件夹中的所有文件都具有 Vue 类型。 然而，这比仅仅.vue扩展名更糟糕，这是推荐的默认值。

Answer 2

这已经是一个老问题了，但似乎您需要添加 shim-vue.d.ts

//shims-vue.d.ts

declare module "*.vue" {
  import Vue from 'vue';
  export default Vue;
}

可以在此处找到更多信息： shims-tsx.d.ts 文件在 Vue-Typescript 项目中有何作用？

Answer 3

你需要安装awesome-typescript-loader包，然后你可以在没有.vue扩展名的情况下导入。 如果你像你一样使用 SCF 组件，请确保安装了vue-loader包和shims-vue.d.ts文件。

Answer 4

如果您的components文件夹中只有.vue文件，您可以尝试将此代码添加到shims-vue.d.ts

declare module '@/components/*' {
    import Vue from 'vue'
    export default Vue
}

Answer 5

这一行import HelloWorld from '@/components/HelloWorld'; 应该import HelloWorld from '@/components/HelloWorld.vue 。

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

Answer 6

.vue时在每个 vuejs 组件的末尾添加.vue是真的。

`import HelloWorld from '@/components/HelloWorld';

应该：

 import HelloWorld from '@/components/HelloWorld.vue'