TS2307：找不到模块“@/components/helper/utils/SimpleUtil.vue”或其对应的类型声明

Question

我从事在 VSCode 中使用 TypeScript 的 Nuxt.js (Vue.js) 项目。导入组件时，我想切断它们的长路径。例如：

代替：

<script lang="ts">
import SimpleUtil from '../../../components/helper/utils/SimpleUtil.vue'

我想要：

<script lang="ts">
import SimpleUtil from '@/components/helper/utils/SimpleUtil.vue'

或者：

<script lang="ts">
import SimpleUtil from 'components/helper/utils/SimpleUtil.vue'

但是，当我使用：

<script lang="ts">
import SimpleUtil from '@/components/helper/utils/SimpleUtil.vue'

出现错误：

tsconfig.json 文件如下所示：

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ES6",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": "./src",
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "types": [
      "@types/node",
      "@nuxt/types"
    ],
    "resolveJsonModule": true
  },
  "paths": {
    "~/*": [
      "src/*"
    ],
    "@/*": [
      "src/*"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue"
  ],
  "exclude": [
    "src/node_modules",
    "./node_modules",
    ".nuxt",
    "dist"
  ]
}

nuxt.config.js 文件如下所示：

export default {
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    title: 'Licota',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: ['~/assets/css/main.sass'],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    // https://go.nuxtjs.dev/stylelint
    '@nuxtjs/stylelint-module',
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    'bootstrap-vue/nuxt',
  ],

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {},

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    extractCSS: true,
  },

  srcDir: 'src/',

  vue: {
    config: {
      productionTip: false,
      devtools: true
    }
  }
}

我该如何解决这个问题？

Answer 1

这是我在 paths 中声明 jsconfig.json 的方式，它对我有用：

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

有关更多信息，您可以查看Nuxt TypeScript