Vite configures alias and handles errors: The module "xxx" or its corresponding type declaration method cannot be found.

1. Configuration file

Install the "@types/node" module to deal with the problem of alias not taking effect

npm i @types/node -D

Modify the "" file and configure the alias

import { defineConfig } from 'vite'
import { resolve } from 'path';
import vue from '@vitejs/plugin-vue'

// /config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: '@',                                   // Alias        replacement: resolve(__dirname, 'src'),      // The corresponding address of the alias      },
      {
        find: 'components',
        replacement: resolve(__dirname, 'src/components'),
      }
    ]
  }
})

2. Configuration file

This step is used to solve the "Error: The module "xxx" or its corresponding type declaration cannot be found"
Configure the "baseUrl and paths" item
The content in paths is configured according to the alias

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*":["src/*"],
      "components":["src/components/*"],
      "_pinia/*":["src/pinia/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./" }]
}

Summarize

This article about vite configuration alias and handling errors: the module "xxx" or its corresponding type declaration method cannot be found. This is the end. For more related vite configuration alias and handling errors, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!