安装
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>
