vite中配置路径别名@

1.在vite.config.ts中增加配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

2.需要安装node的类型声明文件

  在vite.config.ts中配置@时使用到了path,此时会报错，告诉你缺少@types/node，需要再安装一下

yarn add @types/node -D

3.修改tsconfig.json,增加如下配置

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

注意：修改完 vite.config.ts 文件需要重启