Vue3+Vite2+typescript 项目别名配置

在 vite.config.ts 文件中增加配置

官网参考：https://cn.vitejs.dev/config/#resolve-alias

首先引入 resolve 方法

import { resolve } from 'path'

然后增加resolve配置

  resolve: {
    alias: [{ find: '@', replacement: resolve(__dirname, 'src') }]
  }

vite.config.ts 完整内容

/* vite.config.ts */
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [{ find: '@', replacement: resolve(__dirname, 'src') }]
  }
})

这个时候使用 @已经没有问题了，但是还不能通过 CTRL + 点击 跳转到定义位置
接下来就要配置 tsconfig.json 文件来解决
增加配置项 baseUrl 和 paths

"baseUrl": ".", // paths 路径解析起点
"paths": {
    "@/*": ["src/*"] // 别名路径设置
}

tsconfig.json 完整内容

/* tsconfig.json */
{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".", // paths 路径解析起点
    "paths": {
      "@/*": ["src/*"] // 别名路径设置
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

这时候就能通过CTRL+点击跳转到定义文件位置