Viteでimportパスにエイリアスを使う方法

はじめに

2022年6月29日からLaravelのデフォルトだったバンドルツールがwebpackからViteになりました。
新しいプロジェクトで初めてViteを使うので、Importパスでエイリアスを使うために必要なことを備忘録として残しておきたいと思います。

バージョン

• Laravel v9.21.6
• Vite 3.0.0
• laravel-vite-plugin 0.5.0

やりたいこと

// 相対パスで指定していたimportを
import Hoge from '../components/Hoge'

// こんな感じにインポートしたい
import Hoge from '@/components/Hoge'

vite.config.jsに追記

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

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    // 下記を追加する
    resolve: {
        alias: {
            '@': '/resources/js',
        },
    },
    // ここまで
});