Как сконфигурировать алиасы для html в Vite?

JavaScript npm

1 ответ

Сейчас ситуация такая: я пытаюсь настроить алиасы и пытаюсь использовать внутри html, но похоже они по умолчанию не работают для html файлов. При попытке использовать алиас в js или scss путь в браузере изменяется (хотя бывает не всегда), но в html появляется ошибка с неизменённым путём `localhost/@/scripts/about.js`.

По вводным: пример в src/pages/about.html

<h2>Body of About</h2> <script type="module" src="@/scripts/about.js"></script>

По вводным: ещё пример с src/js/main.js

import 'the-new-css-reset/css/reset.css'; import '@/styles/style.css'; document.querySelector('#app').innerHTML = '<h1>11</h1>';

Проект без фреймворков.

Моя структура папок:

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Web-разработка Ответ

В Vite алиасы для HTML работают не так, как алиасы для JavaScript/TypeScript. Настройка resolve.alias применяется к импортам в JS/TS/CSS, но обычный статический HTML не всегда проходит через тот же механизм. Поэтому путь вроде @/assets/file.png внутри index.html может не резолвиться так, как ожидается.

Для JS/TS настройка стандартная:

import { defineConfig } from 'vite';
import path from 'node:path';
 
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
});

import { defineConfig } from 'vite'; import path from 'node:path'; export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, 'src') } } });

И дальше в коде:

import logo from '@/assets/logo.svg';

import logo from '@/assets/logo.svg';

А для HTML лучше использовать один из трех вариантов. Первый: положить статические файлы в public и ссылаться от корня:

&lt;img src="/images/logo.svg" alt="Logo"&gt;

Второй: импортировать ресурс в JS и подставить его в компонент/шаблон. Третий: использовать transformIndexHtml plugin, если нужно именно преобразовывать HTML на этапе сборки.

export default defineConfig({
  plugins: [
    {
      name: 'html-alias',
      transformIndexHtml(html) {
        return html.replaceAll('%ASSETS%', '/src/assets');
      }
    }
  ]
});

export default defineConfig({ plugins: [ { name: 'html-alias', transformIndexHtml(html) { return html.replaceAll('%ASSETS%', '/src/assets'); } } ] });

для index.html не рассчитывайте на resolve.alias как для JS;
public подходит для файлов, которые не нужно обрабатывать Vite;
src/assets лучше использовать через import из JS/TS;
после настройки проверяйте не только dev server, но и production build.

Если задача простая — картинки, favicon, статичные html-ссылки — используйте public. Если нужен hashed filename и оптимизация сборкой, импортируйте ресурс из кода, а не пытайтесь насильно протащить alias в HTML.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ

Как сконфигурировать алиасы для html в Vite?

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно