第一步：在 vite.config.ts 里面配置

注意: require 可能会报错,可以终端执行 cnpm i --save-dev @types/node，这一点 vscode 提示做的很好

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')

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

第二步：在 tsconfig.json 里面 compilerOptions 下面 增加别名配置

{
  "compilerOptions": {
    ...

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

第三步：直接在页面引入文件中使用 @，例如

import Home from '@/views/home'