你是否被 ../ ../../ 这样的路径折磨的心力憔悴，如果你使用 vite 的话，不妨来试试 alias 命名目录吧。

$\textsf{\color{#6ad9a7}{安装 @types/node 来加载 }}$ $\textsf{\color{#6ad9a7}{path}}$ $\textsf{\color{#6ad9a7}{模块}}$

npm i @types/node --save-dev

$\textsf{\color{#6ad9a7}{在 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"),
      // 这里的 @ 就是我们要为 src 配置的别名
    }
  }
})

$\textsf{\color{#6ad9a7}{配置 tsconfig.json }}$

这一步的作用是让 IDE 可以对路径进行智能提示

在 tsconfig.json 的 compilerOptions 选项中加入：

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

这样就可以在任何位置愉快地使用 @/ 来代替 src 啦！当然如果需要其他的 alias 直接在 vite.config.ts 中添加条目即可