vue3+vite项目配置路径别名@

下载依赖

yarn add @types/node -D

修改配置文件vite.config.ts

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

export default defineConfig({
 ......
  // 配置别名@指向src目录
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  },
})

修改配置文件tsconfig.app.json

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

进阶的别名设置（tsconfig.app.json）

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths":{
      "@router/*": ["src/router/*"],
      "@style/*": ["src/style/*"],
      "@model/*": ["src/model/*"],
      "@page/*": ["src/page/*"],
      "@component/*": ["src/component/*"],
      "@hook/*": ["src/hook/*"],
      "@util/*": ["src/util/*"],
      "@assert/*": ["src/assert/*"]
    },
    ......
  },
  ......
}