vue3导入模块@路径

1.下载@types/node
npm或者yarn

yarn add @types/node

npm i @types/node

2.修改vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 需要安装 @types/node
import { resolve } from 'path';

export default defineConfig({
  plugins: [vue()],
  // 自定义路径
  resolve: {
    alias: {
      '@': resolvePath('src'),
      '@icons': resolvePath('src/assets/images/icons'),
    }
  },
})
/**
 * 配置路径
 * @param paths 路径
 * @returns
 */
function resolvePath(paths: string): string {
  return resolve(__dirname, paths);
}

3.修改tsconfig.json文件，配置 baseUrl、paths

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*":["src/*"],
      "@icons/*":["src/assets/images/icons/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}