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

Question

[TtT RrR]

Я пытаюсь настроить алиасы и пытаюсь использовать внутри 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>';

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

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

Мой vite.config.js

import { resolve } from 'path';
import { defineConfig } from 'vite';
import eslint from 'vite-plugin-eslint';
import vituum from 'vituum';
import posthtml from '@vituum/vite-plugin-posthtml';


export default defineConfig({
  publicDir: 'public',
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src/'),
      '@scss': resolve(__dirname, 'src/styles'),
    },
  },
  plugins: [
    vituum(),
    posthtml({
      root: './src'
    }),
    eslint({
      cache: false,
      fix: true,
    }),
  ],
  build: {
    minify: 'esbuild',
    manifest: true,
  },
});

Демонстрация без шаблонизатора:
https://stackblitz.com/edit/github-2jm8rlpr?file=i...

Comments

[Aleksey Solovyev]

согласно ответу на stackoverflow стоит использовать find при конфигурации alias

export default defineConfig({
...
    resolve: {
        alias: [
            { find: '@', replacement: path.resolve(__dirname, 'src') },
        ],
    },
...
})

дока для alias

[TtT RrR]

Aleksey Solovyev, как бы в js да работает, а в html нет. Только если полный путь /src/ писать

Демонстрация без шаблонизатора:
https://stackblitz.com/edit/github-2jm8rlpr?file=i...