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

Question

我刚刚使用vue-cli vue upgrade 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"
  ]
}

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作为typescript处理（对于SFC而言，都是如此）] >