Nuxt TypeScript ошибка: nuxt: typcript Не удается найти модуль '@ / my-module'

Question

Я установил Nuxt с TypeScript, используя инструкции из https://typescript.nuxt.org. Переход был довольно плавным и нормальным, за исключением того, что я не могу избавиться от этой ошибки nuxt:typescript «Не удается найти модуль», которая, очевидно,является ложноположительным.

Мой импорт выглядит следующим образом:

import InputField from '@/components/InputField.vue'

Я пробовал с ~/ и без расширения .vue. Ничего не работает.

Мой tsconfig.json выглядит так:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["esnext", "esnext.asynciterable", "dom"],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"],
      "~*": ["src/*"],
      "@/*": ["src/*"]
    },
    "types": ["@types/node", "@nuxt/types"]
  },
  "exclude": ["node_modules"]
}

И у меня есть этот объект в моем nuxt.config.js:

typescript: {
  typeCheck: {
    eslint: true,
    vue: true
  }
}

Answer 1

Я нашел решение здесь: https://github.com/nuxt/typescript/issues/153#issuecomment-543010838

По сути, создайте ts-shim.d.ts в своем корневом каталоге со следующим содержимым:

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

Что касается вашего tsconfig.json, сделайтеуверен, что у вас есть следующие записи:

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    }
  }
}

Это решило мои проблемы как с .vue импортом, так и с .ts импортом.

Примечание! Это сейчасабсолютно обязательно включить .vue в конце импорта Vue, иначе импорт завершится неудачей:

import SomeComponent from '~/components/SomeComponent.vue'