vite 配置 @别名

1. 安装声明文件

npm i @types/node -D

2. 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: {
      '@': resolve(__dirname, './src'),
    },
  },
})

3. tsconfig.json

添加 baseUrl 和 paths

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

参考文章：

vite vue-ts 配置 “@” 路径别名 - 掘金 (juejin.cn)