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: 需要排除操作的文件列表,选填项,默认值为[].