Nuxt TypeScript 错误:nuxt:typescript 找不到模块“@/my-module”

Dug*_*ugi 6 typescript tsconfig vue.js nuxt.js

我已经使用https://typescript.nuxt.org 中的说明使用 TypeScript 设置了 Nuxt 。过渡非常无缝并且可以,除了我无法摆脱nuxt:typescript“无法找到模块”的错误,这显然是误报。

我的进口看起来像这样:

import InputField from '@/components/InputField.vue'
Run Code Online (Sandbox Code Playgroud)

我试过有~/和没有.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"]
}
Run Code Online (Sandbox Code Playgroud)

我的对象中有这个对象nuxt.config.js:

typescript: {
  typeCheck: {
    eslint: true,
    vue: true
  }
}
Run Code Online (Sandbox Code Playgroud)

错误示例

Dug*_*ugi 12

我在这里找到了解决方案:https : //github.com/nuxt/typescript/issues/153#issuecomment-543010838

基本上,ts-shim.d.ts使用以下内容在您的根目录中创建一个:

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue
}
Run Code Online (Sandbox Code Playgroud)

至于您的tsconfig.json,请确保您在那里有这些条目:

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

这解决了我在.vue进口和.ts进口方面的问题。

笔记!现在绝对必须在 Vue 导入的末尾包含.vue,否则导入将失败:

import SomeComponent from '~/components/SomeComponent.vue'
Run Code Online (Sandbox Code Playgroud)