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

../../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
}));

大功告成！我的匯入路徑現在漂亮多了