vue-cli3 使用雪碧圖

//vue.config.js

const path = require("path");
const SpritesmithPlugin = require("webpack-spritesmith"); //引入雪碧圖

module.exports = {
  // 請求基本路徑（是否在根目錄下）
  baseUrl: "process.env.NODE_ENV" === "production" ? "/" : "",
  // assetsSubDirectory: 'static',//必須熱刷新

  // http://yuanbao/
  // http://www.yuanbaowl.com/
  // 輸出文件目錄 當運行 vue-cli-service build 時生成的生產環境構建文件的目錄。
  outputDir: "dist",
  // // eslint-loader生產模式下禁用lintOnSave是否在保存的時候檢查
  // lintOnSave: process.env.NODE_ENV !== 'production',
  // 關閉語法檢查錯誤警告
  lintOnSave: false,
  // 放置生成的靜態資源 (js、css、img、fonts) 的 相對於輸出目錄。
  // assetsDir:'',
  // 指定生成的 index.html 的輸出路徑 (相對於 輸出目錄)。也能夠是一個絕對路徑。
  // indexPath:'index.html',
  // use the full build with in-browser compiler?
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  // compiler: false,

  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: config => {},
  // 設定webpack
  configureWebpack: {
    plugins: [
      new SpritesmithPlugin({
        // 目標小圖標
        src: {
          cwd: path.resolve(__dirname, "./src/assets/images/icon"),
          glob: "*.png"
        },
        // 輸出雪碧圖文件及樣式文件
        target: {
          image: path.resolve(__dirname, "./src/assets/images/sprite.png"),
          css: [
            [
              path.resolve(__dirname, "./src/assets/css/sprite.less"),
              {
                format: "function_based_template"
              }
            ]
          ]
        },
        customTemplates: {
          function_based_template: path.resolve(
            __dirname,
            "./my_handlebars_template.handlebars"
          )
        },
        // 樣式文件中調用雪碧圖地址寫法
        apiOptions: {
          cssImageRef: "../images/sprite.png?v=" + Date.parse(new Date())
        },
        spritesmithOptions: {
          algorithm: "binary-tree"
        }
      })
    ]
  },

  // vue-loader 配置項
  // https://vue-loader.vuejs.org/en/options.html
  // vueLoader: {},
  // 生產環境是否生成 sourceMap 文件
  productionSourceMap: true,
  // css相關配置
  css: {
    // 是否使用css分離插件 ExtractTextPlugin
    extract: true,
    // 開啓 CSS source maps?
    sourceMap: false,
    // css預設器配置項
    loaderOptions: {
      css: {
        //  這裏的選項會傳遞給css-loader
      },
      postcss: {
        // 這裏的選項會傳遞給 postcss-loader
        plugins: [
          require("postcss-px2rem")({
            remUnit: 75
          })
        ]
      }
    }
    // 啓用 CSS modules for all css / pre-processor files.
    //  modules: false
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require("os").cpus().length > 1,
  // 是否啓用dll
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  // dll: false,
  // PWA 插件相關配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相關配置
  devServer: {
    port: 8085, // 端口號
    host: "localhost",
    https: false, // https:{type:Boolean}
    open: true, //配置自動啓動瀏覽器
    // // 設置代理
    proxy: {
      "/api": {
        // target: 'http://120.79.251.89',//跨域地址
        target: "http://Vuewallet",
        ws: false, //是否代理websockets
        changeOrigin: true, //容許跨域
        pathRewrite: {
          "^/api": "/"
        }
      }
    },
    overlay: {
      //  當存在編譯器錯誤或警告時，在瀏覽器中顯示全屏覆蓋。
      // 默認狀況下禁用。若是隻想顯示編譯器錯誤：
      //  同時顯示警告和錯誤：
      warnings: true,
      errors: true
    }
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
    SpritesmithPlugin: "webpack-spritesmith"
  }
};

根目錄下建立 my_handlebars_template.handlebars文件寫入對應模板

{{#block "sprites"}}
{{#block "spritesheet"}}
@img:url('{{{spritesheet.escaped_image}}}');
@r:75rem;
.icon{
   background-size: {{spritesheet.width}}/@r {{spritesheet.height}}/@r;
   background-repeat:no-repeat;
   display:inline-block;
};
{{/block}}
{{#each sprites}}
.icon-{{{strings.name}}} {
  background-image: @img;
  background-position: {{offset_x}}/@r {{offset_y}}/@r;
  width: {{width}}/@r;
  height: {{height}}/@r
};
{{/each}}
{{/block}}