Vitejsを使用してエイリアスファイルパスを解決する方法 | 相対パスを使わずに済むようにする...

エイリアスの設定: まず、Vitejsのプロジェクト設定ファイル（通常はvite.config.js）で、エイリアスを定義します。以下は、例です。

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@utils': path.resolve(__dirname, 'src/utils'),
    },
  },
});

上記の例では、@componentsと@utilsというエイリアスを定義しています。それぞれのエイリアスは、src/componentsとsrc/utilsディレクトリに対応しています。

エイリアスの使用: エイリアスを使用するには、@（または定義したエイリアスの名前）をファイルパスの先頭に追加します。以下は、例です。

import Button from '@components/Button';
import { fetchData } from '@utils/api';

上記の例では、@components/Buttonと@utils/apiというエイリアスを使用しています。これにより、相対パスを使用せずにファイルを参照できます。

エイリアスの追加: 必要に応じて、他のディレクトリやファイルのエイリアスを追加することもできます。プロジェクトのファイル構造に合わせて、適切なエイリアスを定義しましょう。

以上が、Vitejsを使用してエイリアスファイルパスを解決する方法です。エイリアスを定義することで、プロジェクト内のファイルへのアクセスが簡単になり、相対パスの混乱を避けることができます。