第一步：安装@types/node

npm i -D @types/node

第二步：vite.config.ts

import { resolve } from 'path'
 
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
      "@assets": resolve(__dirname, "src/assets"),
      "@request": resolve(__dirname, "src/request"),
      "@views": resolve(__dirname, "src/views"),
      "@components": resolve(__dirname, "src/components"),
      "@store": resolve(__dirname, "src/store"),
      "@apis": resolve(__dirname, "src/apis"),
    }
  }
})

第三步：新建jsconfig.json ——> 这个是通用的，在vue2中或者js中都可以解决@报错找不到的问题，当写下@之后写/就会提示路径

这个文件是针对于vscode编辑器的，让其进行识别

{
  "compilerOptions": {
    "baseUrl": "./", //还可以是"."
    "paths": {
      "@/*": ["src/*"],
      // "src/*": ["src/*"],
      "@components/*": ["src/components/*"], //这样直接写@components即可
      "@assets/*": ["src/assets/*"],
      "@views/*": ["src/views/*"],
      "@store/*": ["src/store/*"],
      "@request/*": ["src/request/*"],
      "@apis/*": ["src/apis/*"]
    },
    // "target": "ES6", //这个暂时不知道有什么区别
    "target": "ES5",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

注意：当使用的为ts语法时，就配置tsconfig.json

而不用jsconfig.json了！

tsconfig.json和jsconfig.json两者是不能共存的！！！

配置tsconfig.json：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": false,
    "jsx": "preserve",
    "moduleResolution": "node",
    "baseUrl": "./",
    "allowJs": true, // 编译时，允许有 js 文件
    "allowSyntheticDefaultImports": true, // 允许引入没有默认导出的模块
    "paths": {
      "@/*": ["src/*"],
      // "src/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"],
      "@views/*": ["src/views/*"],
      "@store/*": ["src/store/*"],
      "@request/*": ["src/request/*"],
      "@apis/*": ["src/apis/*"],
      "@plugins/*": ["src/plugins/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}