Vue 3 + Vite プロジェクトでの @ エイリアスの設定方法

Vue 3 と Vite を組み合わせたプロジェクトで、@ エイリアスを使用して src ディレクトリを参照する方法について解説します。相対パスの多用を避け、コードの可読性とメンテナンス性を向上させるために重要な設定です。

問題点

Vue CLI とは異なり、Vite はデフォルトで @ エイリアスを src ディレクトリにマッピングしていません。このため、以下のような相対パスでのインポートが必要になります：

import Component from '../../../../components/Component.vue'

このようなパスは可読性が低く、ファイルの移動時に修正が煩雑になります。

解決策

以下の手順で @ エイリアスを設定できます。

1. Vite 設定ファイルの更新

vite.config.js または vite.config.ts にエイリアス設定を追加します。

vite.config.jsvite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  }
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  }
})

2. TypeScript を使用している場合

TypeScript プロジェクトでは、tsconfig.json にもパスエイリアスの設定が必要です。

json

{
  "compilerOptions": {
    // その他の設定...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

WARNING

Vite の設定と TypeScript の設定の両方が必要です。片方だけでは開発時またはビルド時にエラーが発生する可能性があります。

詳細な設定例

より詳細なエイリアス設定の例を示します。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@assets': path.resolve(__dirname, './src/assets'),
      '@stores': path.resolve(__dirname, './src/stores'),
      '@utils': path.resolve(__dirname, './src/utils')
    }
  }
})

対応する tsconfig.json の設定：

json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@assets/*": ["./src/assets/*"],
      "@stores/*": ["./src/stores/*"],
      "@utils/*": ["./src/utils/*"]
    }
  }
}

Vite 推奨の設定方法 (2023年最新)

最新の Vite では fileURLToPath を使用した方法が推奨されています。

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

使用例

設定後は、以下のようにエイリアスを使用できます。

vue

<script setup>
import HelloWorld from '@/components/HelloWorld.vue'
import { someUtil } from '@/utils/helpers'
</script>

<template>
  <HelloWorld />
</template>

トラブルシューティング

エイリアスが機能しない場合

パッケージの確認: path モジュールがインストールされているか確認してください
bash
```
npm install --save-dev @types/node
```
設定ファイルの位置: vite.config.js と src ディレクトリが同じ階層にあることを確認してください
VS Code の設定: TypeScript を使用している場合、VS Code でパスエイリアスを認識させるには、ワークスペースの TypeScript バージョンを使用するように設定してください

動的インポートでの注意点

動的なインポートではエイリアスが機能しない場合があります。その場合は以下のようなヘルパー関数を使用します。

// utils/path.js
export const assetPath = (relativePath) => {
  return new URL(`./assets/${relativePath}`, import.meta.url).href
}

// 使用例
const imagePath = assetPath('images/logo.png')

まとめ

Vite プロジェクトで @ エイリアスを設定するには、Vite 設定ファイルと TypeScript 設定ファイルの両方を適切に設定する必要があります。これにより、コードの可読性が向上し、メンテナンスが容易になります。最新の Vite では fileURLToPath を使用した方法が推奨されていますが、従来の path.resolve を使用する方法も引き続き利用できます。

関連記事

Vue 3 + Vite プロジェクトでの @ エイリアスの設定方法 ​

問題点 ​

解決策 ​

1. Vite 設定ファイルの更新 ​

2. TypeScript を使用している場合 ​

詳細な設定例 ​

Vite 推奨の設定方法 (2023年最新) ​

使用例 ​

トラブルシューティング ​

エイリアスが機能しない場合 ​

動的インポートでの注意点 ​

まとめ ​