Vue组件无法解析打字稿中的相对组件导入答案

【问题标题】：Vue component cannot resolve relative component imports in typescriptVue组件无法解析打字稿中的相对组件导入
【发布时间】：2020-07-08 09:59:12
【问题描述】：

我刚刚使用 vue-cli vue upgrade typescript 命令升级到 typescript。命令成功退出。

但是，现在，以前在 javascript 中工作的相对导入无法再解析了。

我有以下 Home 组件，它导入另一个组件：

<script lang="ts">
    import Navbar from "./Navbar"

    export default {
        name: "Home",
        components: {
            Navbar
        }
    }
</script>

导航栏组件：

<script lang="ts">
export default {
    name: "Navbar"
}
</script>

home 组件中的import Navbar from "./Navbar" statement 给了我以下错误：Cannot find module './Navbar'.Vetur(2307)

我怀疑它与 tsconfig 配置有关。它是作为自动打字稿升级的一部分自动生成的：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

【问题讨论】：

标签： typescript vue.js vue-cli vue-cli-4

【解决方案1】：

这是正确的。发生这种情况的原因是vetur 找不到模块./Navbar 的路径。但是，它可以找到./Navbar.vue 的路径。

从a Vetur maintainer 的评论可以看出，不支持导入不带.vueextension 的组件。

您还需要声明一个 vue-shim.d.ts 来声明 .vue 的类型，这样您也不会在那里发生爆炸：

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

现在，请注意，这只会发生在 script lang="ts" 的文件中，除此之外，您不会看到此问题，因为 Vetur 不会将脚本块中的任何 javascript 处理为 typescript（对于 SFC 是真的）

【讨论】：