0

vue upgrade typescript我刚刚使用 vue-cli命令升级到 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" statementhome 组件中给了我以下错误：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"
  ]
}
4

1 回答 1

3

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

您可以从Vetur 维护者的评论中看到，不支持导入没有.vue扩展的组件。

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

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

现在，请注意，这只会发生在文件script lang="ts"中

于 2020-03-27T17:06:32.053 回答