你是否被 ../ ../../ 這樣的路徑折磨的心力憔悴，如果你使用 vite 的話，不妨來試試 alias 命名目錄吧。

安裝 @types/node 來加載 path 模塊

npm i @types/node --save-dev

在 vite.config.ts 中引入

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

const path = require("path")
// 如果上面的語句報錯：
// import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      // 這里的 @ 就是我們要為 src 配置的別名
    }
  }
})

配置 tsconfig.json

這一步的作用是讓 IDE 可以對路徑進行智能提示

在 tsconfig.json 的 compilerOptions 選項中加入：

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

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