1.2.0 • Published 2 years ago
vue-sprite-plugin v1.2.0
vue-sprite-plugin
描述
vue
单文件组件中的图片背景,通过vue-sprite-plugin
插件处理后,可自动将项目中需要操作的图片合成雪碧图,并自动更新代码内容.
例如Home.vue
代码如下:
<template>
<div class="logo"></div>
<div class="banner"></div>
</template>
<script lang="ts">
...
</script>
<style scoped lang="less">
.logo{
width:50px;
height:50px;
background-image: url('../../assets/images/logo.jpg?_sprite');
}
.logo{
width:100px;
height:100px;
background-image: url('../../assets/images/banner.jpg?_sprite');
}
</style>
只要代码中使用background-image
做属性名,并且url
后面加上后缀?_sprite
,那么vue-sprite-plugin
就会将此图片合成雪碧图.
目前插件只作用于生产环境,开发环境下不合成雪碧图.
vue-sprite-plugin
处理后会自动将样式代码转化成下面形式:
<style scoped lang="less">
.logo{
width:50px;
height:50px;
background-image: url('../../assets/images/css-sprite.png');
background-repeat:no-repeat;
background-position:0 0;
}
.logo{
width:100px;
height:100px;
background-image: url('../../assets/images/css-sprite.png');
background-repeat:no-repeat;
background-position:-50px 0;
}
</style>
安装
项目下运行yarn add vue-sprite-plugin -D
安装插件
配置
vue
框架下的配置方式.在项目根目录vue.config.js
添加如下配置.
const vueSpritePlugin = require("vue-sprite-plugin");
module.exports = {
publicPath: './',
chainWebpack:config =>{
config.module
.rule('vue')
.test(/\.vue$/)
.use("vue-sprite-plugin/src/loader/index")
.loader("vue-sprite-plugin/src/loader/index")
.end()
config.plugin("vueSpritePlugin").use(vueSpritePlugin)
.tap((args)=>{
args = [
{
filename:"css-sprite.png",
exclude:[]
}];
return args;
})
.end();
}
}
参数列表:
- filename: 生成的雪碧图文件名,选填项,默认值为
css-sprite.png
. - exclude: 需要排除操作的文件列表,选填项,默认值为
[]
.