vue3 vite 项目中自动导入图片

W.Y.B.G2025-05-20 16:25

vue3 vite 项目中自动导入图片

安装插件
配置插件
使用方法

安装插件

js 复制代码

yarn add vite-plugin-vue-images -D
或者
npm install vite-plugin-vue-images -D

配置插件

在 vite.config.js 文件中配置插件

js 复制代码

// 引入
import ViteImages from 'vite-plugin-vue-images';

plugins: [
			vue(),
			// 自动导入图片配置
			ViteImages({
				dirs: ['src/assets/images'], // 指定图片存放的目录
				extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp', 'gif'], // 支持的图片格式
				// 可选配置
				customResolvers: [], // 自定义解析行为
				customSearchRegex: '([a-zA-Z0-9]+)', // 重写变量名的匹配规则
			}),
		],

使用方法

比如在 src/assets/images 文件夹中有logo.png图片

html 复制代码

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

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

注意：

1、不能有相同名字不同格式的图片

2、图片名称首字母最好大写。 PS：本人测试小写也可以。但是为了避免Bug建议大写；