一、vite

在 vite.config.js 中配置

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

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

当我们引入path模块失败时可以通过安装 @types/node 解决引入失败问题

npm i -D @types/node

二、TS

在 tsconfig.json 文件中配置

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

效果

通过以上配置重启项目后就可以实现路径别名的使用，并且会有自动提示

还愣着干什么，快去尝试下~