最近又在寫一些前端程式碼，已經受夠了匯入路徑長這樣

../../foo/bar/etc

超糟的！只要目錄結構一改，就很容易壞掉。這可不行！

網路上建議在 tsconfig.json 加上以下設定

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

這樣編輯器裡的波浪底線是消失了，但建置還是失敗。補充一下背景——我這邊是用 Tauri 和 Vite。

結果發現，問題出在 Vite。要讓這些別名生效，還需要在 vite.config.ts 加一些設定

首先，安裝一個外掛

npm install --save-dev vite-tsconfig-paths

然後，加到你的設定檔裡

import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(async () => ({
  plugins: [tsconfigPaths()], // I imagine you have other plugins

  // you probably have a bunch more here too
}));

大功告成！現在我的匯入路徑清爽多了