vite中如何使用sprites雪碧图

1. 安装相关插件

这里是引用
npm install --save-dev vite-plugin-spritesmith
npm install del -D // 根据个人需求看是否需要每次删除再进行安装

2. 配置vite.config.js

import Spritesmith from 'vite-plugin-spritesmith'
import del from 'del'

const resolve = (dir) => path.join(process.cwd(), dir);
const spriteConfig = {
	imgTarget: resolve('src/sprite/img/'),
	scssTarget: resolve('src/sprite/style/')
}
// 每次有更新删除之前sprites 根据需求看是否需要
// del.sync([spriteConfig.imgTarget, spriteConfig.scssTarget])

plugins: [
	  Spritesmith({
		  watch: true,
		  src: {
			  cwd: resolve('./src/assets/sprites'), // 图片源文件
			  glob: '*.png',
		  },
		  target: { // 生成的sprite存放地址
			  image:  `${spriteConfig.imgTarget}sprite.png`,
			  css: `${spriteConfig.scssTarget}sprite.scss`
		  },
		  apiOptions: {
			  cssImageRef: './src/sprite/img/sprite.png', // 一定要在src下 否则图片404！！
			  spritesheet_info: {
				  name: 'vite1',
			  },
			  retina_spritesheet_info: {
				  name: 'vi-retina',
			  }
		  },
		  retina: {
			  classifier(p) {
				  let type = 'normal';
				  let normalName = p;
				  let retinaName = p.replace('.png', '@2x.png')

				  if (p.endsWith('@2x.png')) {
					  type = 'retina';
					  normalName = p.replace('@2x.png', '.png');
					  retinaName = p;
				  }
				  return {
					  type,
					  normalName,
					  retinaName,
				  };
			  },
			  targetImage: `${spriteConfig.imgTarget}sprite-retina.png`,
			  cssImageRef: './src/sprite/img/sprite-retina.png',
		  }
	  })
  ]

3. 对以上代码做特别说明部分

1. 现在assets文件夹下新建sprites文件夹

2. 将需要生成雪碧图的图片存放再sprites中

3. 犹豫这个部分代码的限制，导致存放图片时必须放.png和@2x.png两种名称的图片，如果觉得麻烦的朋友们，可以自行修改这部分代码逻辑即可解决该问题哦

4. 使用

在需要用到雪碧图页面，按照如下方式引用

<style lang="scss">
// .png 图片引用
.icon {
		@include sprites($spritesheet-sprites);
	}
// @2x.png 图片引用
.icon_retina {
	@include retina-sprites($retina_groups);
}
</style>


<template>
	<div>
		<h3>====.png====</h3>
		<ul class="icon" style="display:flex;">
			<li class="address"></li>
		</ul>
		<h3>====@2x.png====</h3>
		<ul class="icon_retina" style="display:flex;">
			<li class="address"></li>
		</ul>
	</div>
</template>

效果图