【Vite】Viteの便利機能alias（エイリアス）を使用してpath（パス）を設定する方法

なやむくん

ファイルパスに「@」があるのを見かけるけどあれは何かな…。

なやむさん

ファイルパス記述するのめんどくさいし、変更になったときに全部書き換えるのが手間…。

などの疑問や悩みを解決してまいります。

Vite（プロジェクトの開発を高速化してくれるビルドツール）にはalias（エイリアス）と言われる便利な機能があります。

このaliasを使用することで、相対パスをaliasで設定することができます。

import TheWelcome from '../components/TheWelcome.vue'

// 相対パスの記述を省略することができる
import TheWelcome from '@/components/TheWelcome.vue'

今回はこのaliasの設定方法について解説していきたいと思います。

みつた

設定しておくことでファイルパスの管理がしやすくなります！

Table of Contents

Viteとは

Viteについては別記事にて解説しています。

導入方法もこちらに解説がありますのでぜひ参考にしてください。

参考記事

: 【Vue.js】Viteの解説を交えながら、Viteプロジェクトを作成する方法も解説します。

続きを見る

Viteのalias paths（エイリアスパス）オプション

Vite のオプションにあるalias paths（エイリアスパス）を利用することで、プロジェクト内のファイルパスやディレクトリパスを相対パスにすることなく、別名で参照することができるようになります。

VueやReactなどのプロジェクトファイルを見てみたときに「@」の記号がパスに含まれているのを見たことがありませんか？

これはエイリアスパスを設定しており、そのファイルまでのパスを「@」で省略ができるように設定しています。

よろこびくん

すごい便利そうですね！

みつた

設定方法について解説していきます！

alias pathsの設定方法

Viteの設定ファイルであるvite.config.jsに以下のようにresolve.aliasを定義します。

import { fileURLToPath, URL } from 'node:url'

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

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

import { fileURLToPath, URL } from 'node:url'の記述は、Node.jsの標準モジュールであるurlを利用しています。

エイリアスパスを設定しているコードは以下になります。

resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url))
  }
}

resolve.aliasについては公式サイトにも解説があります。

このようにresolve.aliasを設定することによって以下のように相対パスを省略した書き方ができるようになります。

import TheWelcome from '../components/TheWelcome.vue'

// 相対パスの記述を省略することができる
import TheWelcome from '@/components/TheWelcome.vue'

よろこびくん

記述も少ないし、見やすくもなりましたね！

Vuetifyのコンポーネントで画像を参照するには

これまでViteのエイリアスパスの設定方法について解説しましたが、このままではVue.jsのUIライブラリであるVuetifyのコンポーネントで画像を参照することができません。

例えばVuetifyのv-carouselコンポーネントタグ内で使用する画像にエイリアスパスを使用して、src属性から画像を参照しようとすると画像が表示されません。

<template>
  <p>↓ v-imgタグの画像が表示されます ↓</p>
  <v-img :width="300" src="@/assets/logo.png"></v-img>

  <p>↓ v-carouselタグの画像が表示されます ↓</p>
  <v-carousel>
    <v-carousel-item
      :width="500"
      src="@/assets/logo.png"
      cover
    ></v-carousel-item>
    <v-carousel-item
      :width="500"
      src="@/assets/logo.png"
      cover
    ></v-carousel-item>
    <v-carousel-item
      :width="500"
      src="@/assets/logo.png"
      cover
    ></v-carousel-item>
  </v-carousel>
</template>

みつた

v-imgタグだとなぜか表示されるっぽいです…。（仕様？）

参考

v-imgコンポーネントタグは画像が表示される理由については、調べても参考になる記事が見つけられませんでした…。
ちなみにchatGPTでは、「v-imgコンポーネントが設定をしなくても画像が表示されるのは、Vuetifyの仕様によるものです。Vuetifyはv-imgコンポーネントのために特別な処理を行っているため、v-imgのsrc属性はエイリアスパスを正しく解決するようになっています。」という回答がありました。

上記画像を見てもらうとv-carouselコンポーネントタグ内で指定している画像だけが表示されていないのが分かります。

原因

検証ツールでコードを確認すると、パスがコンパイルされずに記述したエイリアスパスがそのままsrc属性に表示されています。

なやむくん

これは一体なぜなのでしょうか…。

みつた

対応方法について解説していきますね！

対応方法

なぜコンパイルされないかといいますと、Viteはパスの変換対象のタグや属性がデフォルトで設定されているからです。

みつた

こちらにデフォルトについての解説がありました。

デフォルトは以下の設定になっており、Vuetifyのコンポーネントタグでもエイリアスパスを使用するためには設定を追記する必要があります。

// Viteのデフォルトの設定
{
  video: ['src', 'poster'],
  source: ['src'],
  img: ['src'],
  image: ['xlink:href', 'href'],
  use: ['xlink:href', 'href']
}

設定を追加する場合は以下のコードになります。

みつた

設定する箇所はtemplate.transformAssetUrlsオプションです。

export default defineConfig({
  plugins: [
    vue({
      template: {
        transformAssetUrls: {
          tags: {
            "v-img": ["src"], // 表示されない場合は追加
            "v-carousel-item": ["src"],　// 追加
            video: ["src", "poster"],
            source: ["src"],
            img: ["src"],
            image: ["xlink:href", "href"],
            use: ["xlink:href", "href"],
          },
        },
      },
    }),
    ...以下省略

このように記述して再度確認していただくとv-carousel-itemコンポーネントタグ内の画像が表示されたかと思います。

本記事のまとめ

ここまで読んでいただきありがとうございました。本記事のまとめです。

ポイント

alias paths（エイリアスパス）を利用することで、プロジェクト内のファイルパスやディレクトリパスを相対パスにすることなく、別名で参照することができる
vite.config.jsにresolve.aliasを定義する
Viteはパスの変換対象のタグや属性がデフォルトで設定
されている