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

此行import HelloWorld from '@/components/HelloWorld';应该为import HelloWorld from '@/components/HelloWorld.vue。

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

Answer 3

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

//shims-vue.d.ts

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

可以在这里找到更多信息：What does the shims-tsx.d.ts file do in a Vue-Typescript project?

Answer 4

在导入时，确实要在每个vuejs组件的末尾添加.vue。

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

应为：

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

Answer 5

您需要安装awesome-typescript-loader软件包，然后才能导入而没有.vue扩展名。如果像您一样使用SCF组件，请确保已安装vue-loader软件包和shims-vue.d.ts文件。

Answer 6

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

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

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

6 个答案: