最近、フロントエンドのコードをまたいくつか書いていて、インポートパスがこんな見た目になるのにすっかりうんざりしていました。

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

これで完了です！インポートパスもすっきりしました。