在 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'