Vue 3 + Vite — добавление псевдонима пути @ в Src конфига Vite

Эта запись показывает как настроить alias пути для сопоставления символа (@) с папкой src проекта на Vue 3 с помощью Vite. Псевдоним пути позволяет операторам импорта начинаться с префикса @. Например import { MyComponent } from '@/components';. Этот метод устраняет необходимость в длинных относительных путях import { MyComponent } from '../../../components';

Добавьте следующую строчку в ваш конфигурационный файл vite.config.js:

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

alias добавляется в свойстве resolve конфигурации и сопоставляет символ @ с путем src с помощью служебной функции fileURLToPath.

Пример конфигурации Vite с псевдонимом пути @

Это пример файла Vue 3 vite.config.js, который включает псевдоним пути @ к каталогу src проекта.

import { fileURLToPath, URL } from '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))
        }
    }
});