vite-plugin-vue-images：Vite自动导入图片

安装

yarn add vite-plugin-vue-images -D

配置

vite.config.ts

import ViteImages from 'vite-plugin-vue-images'
 plugins: [
        ViteImages({
            dirs: ['src/assets/images'], // 指明图片存放目录
            extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'], // 有效的图像扩展
            customResolvers: [], // 覆盖名称->图像路径解析的默认行为
            customSearchRegex: '([a-zA-Z0-9]+)' // 重写搜索要替换的变量的Regex。
        })
 ]

使用

<template>
    <div>
        <img :src="LayoutAvatar" />
    </div>
</template>

<script setup lang="ts">
</script>

转换为

<template>
    <div>
        <img :src="LayoutAvatar" />
    </div>
</template>

<script setup lang="ts">
import LayoutAvatar from '@/assets/images/layout/avatar.png'
</script>