Псевдоним пути в Vite

Псевдоним заменяет длинный путь короткой меткой в поле resolve.alias.

Пусть текст для страницы лежит в src/lib/hello.js. Из главного модуля до него идёт цепочка ./lib/hello.js. В настройке зададим метку @lib на ту же папку, чтобы импорт выглядел короче. Сначала файл с экспортом:

export const text = 'hello';

В корне проекта опишем псевдоним через fileURLToPath и URL из Node, чтобы путь был абсолютным:

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

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

В точке входа импорт укажем через метку, а не через точки:

import { text } from '@lib/hello.js';

document.body.textContent = text;

После перезапуска сервера разработки откроем http://localhost:5173 и увидим слово hello. Vite при разборе импорта подставит настоящий путь к папке src/lib, хотя в коде остаётся короткая метка.

Создайте src/data/ready.js со строкой ready, добавьте метку @data на src/data и выведите текст на странице через импорт @data/ready.js.

Переименуйте папку src/data в src/store, поправьте только поле псевдонима в настройке и убедитесь, что строка ready по-прежнему появляется на экране.