Vue 组件无法解析 typescript 中的相对组件导入

Question

我刚刚使用 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>

主页组件中的 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"
  ]
}

Answer 1

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

从a Vetur maintainer的评论可以看出，不支持导入没有.vue扩展名的组件。

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

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

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

Vue 组件无法解析 typescript 中的相对组件导入

Vue component cannot resolve relative component imports in typescript

typescript

vue.js

vue-cli

vue-cli-4