vue2、3

用 @ 指代 src,避免 ../../../ 相对路径地狱。

Vue CLI (vue.config.js)

const path = require('path')
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '@components': path.resolve(__dirname, 'src/components'),
      },
    },
  },
}

Vite (vite.config.ts)

import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components'),
    },
  },
})

TypeScript / jsconfig (编辑器跳转)

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

使用

import Home from '@/views/Home.vue'
import Button from '@components/Button.vue'

别忘了配 tsconfig 的 paths,否则编辑器能跳转但编译/类型检查报错。