TS2307: не удается найти модуль "@/components/helper / utils/SimpleUtil.vue" или соответствующие объявления типов

#vue.js #nuxt.js

Вопрос:

Я работаю над Nuxt.js (Vue.js ) проект, который использует TypeScript в VSCode. При импорте компонентов я бы хотел отрезать длинные пути к ним. Например:

Вместо:

 <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
    }
  }
}

Как я могу исправить эту проблему?

Ответ №1:

Это способ, который я объявляю paths в моем jsconfig.json , и он работает для меня:

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

Для получения дополнительной информации вы можете проверить Nuxt TypeScript