VueCraft NPM

Плагин Vite ​

Обрабатывайте изображения на этапе сборки — так же, как CLI, но интегрировано в жизненный цикл Vite. Запускается на buildStart и перезапускается в dev-режиме при изменении исходных изображений.

ts
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { vueImageKit } from '@macrulez/vue-image-kit/vite'

export default defineConfig({
  plugins: [
    vue(),
    vueImageKit({
      input: './src/images',
      output: './public/images',
      widths: [400, 800, 1200],
      manifest: './src/assets/images.ts',
    }),
  ],
})

Поддерживаются все опции CLI. sharp должен быть установлен как dev-зависимость.

buildStart/handleHotUpdate вызывают ту же generate(), что и CLI, поэтому инкрементальная генерация применима и здесь — и автоматически включается именно во время vite dev (не vite build), если не задать incremental явно. Изменение одного исходного файла в dev переобрабатывает только этот файл, а не весь пакет.

Импорты на этапе сборки ​

Плагин также разрешает импорты с суффиксом запроса, так что вам никогда не нужно вручную настраивать пропы — метаданные попадают прямо в ваш JS на этапе сборки:

ts
import meta from './photo.jpg?vik'
// → { src, srcset, webp, avif, width, height, placeholder, blurhash, thumbhash, name, src400, ... }

import hash from './photo.jpg?thumbhash'
// → 'base64string'

Передавайте метаданные прямо в проп image компонента <VImage> — без ручной настройки полей:

vue
<script setup lang="ts">
import meta from './hero.jpg?vik'
</script>

<template>
  <VImage :image="meta" alt="Hero" />
</template>
  • ?vik изменяет размер/кодирует изображение в output и возвращает полную запись манифеста (URL используют publicPath, точно как в сгенерированном манифесте). ThumbHash включается всегда.
  • ?thumbhash вычисляет только строку хэша и не пишет файлы.

Оба перезапускаются при изменении исходного изображения в dev. Требуется sharp; thumbhash требуется для вывода хэша.

TypeScript — включите типизированные импорты ?vik / ?thumbhash, один раз сославшись на встроенные декларации (например, в env.d.ts):

ts
/// <reference types="@macrulez/vue-image-kit/vite/client" />

Обслуживание по запросу в dev-режиме ​

И CLI, и импорты на этапе сборки выше — это пакетная/заблаговременная обработка — они обрабатывают изображения до того, как их запросят. Если вы не хотите запускать шаг сборки вообще во время разработки, установите dev.onDemand: true, и изображения будут изменять размер по запросу, кэшируясь на диск после первого попадания:

ts
vueImageKit({
  dev: { onDemand: true }, // монтирует обработчик на /_vik/image во время `vite dev`
})
html
<img src="/_vik/image?src=/photos/cat.jpg&w=800&format=webp" />

Это работает только в dev — configureServer (хук Vite, который он использует) никогда не запускается во время vite build. Для продакшена без CDN смонтируйте тот же обработчик в своём собственном сервере — см. Самостоятельно размещаемый сервер по запросу.

Опции dev ​

Обработчик за dev.onDemand — тот же createImageHandler, что использует самостоятельный сервер — root фиксирован на собственном корне проекта Vite (server.config.root), всё остальное — та же поверхность настройки:

  • onDemand — boolean · по умолчанию: false. Монтирует обработчик во время vite dev.
  • route — string · по умолчанию: /_vik/image. Маршрут, на который монтируется.
  • cacheDir — string · по умолчанию: <root>/.vik-cache. См. Самостоятельно размещаемый сервер по запросу → Опции.
  • maxAge — number · по умолчанию: 31536000 (1 год).
  • allowedWidths — number[], опционален. Ограничить w строго этими значениями.
  • maxWidth — number · по умолчанию: 4000. Верхняя граница для w, когда allowedWidths не задан.