Nuxt TypeScript错误：nuxt：typescript找不到模块'@ / my-module'

Question

我已按照https://typescript.nuxt.org中的说明使用TypeScript设置了Nuxt。过渡非常顺利且可以，只是我无法摆脱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'