最近またフロントエンドのコードを書いていたのだが、importパスがこんな感じになっているのにすっかりうんざりしていた

../../foo/bar/etc

ひどいったらありゃしない！ディレクトリ構成を変えたらすぐに壊れてしまいそうだ。これはいけない！

ネットで調べると、tsconfig.jsonに次のように追記すればいいと書かれていた

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

これでエディタ上の波線は消えたが、ビルドは相変わらず失敗したままだった。ちなみに、ここではTauriとViteを使っている。

どうやら原因はViteにあった。これらのエイリアスを有効にするには、vite.config.tsにも設定を追加する必要がある

まずはプラグインをインストールする

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

次に、configに追加する

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

これで完了！importパスもすっきりした