Vue компонент не может разрешить относительный импорт компонентов в машинописи

Question

Я только что обновился до машинописного текста, используя команду vue -cli vue upgrade typescript. Команда успешно завершена.

Однако теперь относительный импорт, который ранее работал в javascript, больше не может быть разрешен.

У меня есть следующий компонент Home, который импортирует другой компонент:

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

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

Компонент Navbar:

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

import Navbar from "./Navbar" statement в домашнем компоненте дает мне следующую ошибку: Cannot find module './Navbar'.Vetur(2307)

Я подозреваю, что это как-то связано с конфигурацией tsconfig , Он автоматически генерируется как часть автоматического обновления c машинописи:

{
  "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.

Вы можете видеть из комментария сопровождающего Vetur , что импорт компонентов без расширения .vue не поддерживается.

Вам также потребуется объявить vue-shim.d.ts который объявляет наборы для .vue, поэтому вы также не получите там взрывов:

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

Теперь, учтите, это произойдет только в файлах, где script lang="ts", вне этого Вы не увидите эту проблему, поскольку Vetur не будет обрабатывать любой из javascript в блоке сценария как машинописный текст (верно для SFC)