Vue CLI是為Vue.js開發的標準工具，它提供了快速搭建Vue.js項目的能力。Vue CLI是一個命令行工具，具有生成項目、插件擴展、項目構建等一系列功能。其中，Vue CLI的雪碧圖功能給前端工程師帶來很多方便。本文將詳細介紹Vue CLI的雪碧圖功能。

雪碧圖（Spriting）是一種使用CSS Sprites技術將多個小圖標合成為一張大圖的方法，通過將小圖標合并減少HTTP請求次數，提高頁面性能。

在Vue CLI中使用雪碧圖功能，需要先安裝vue-cli-plugin-style-resources-loader插件。可以使用如下命令進行安裝：

npm install vue-cli-plugin-style-resources-loader --save-dev

安裝完成后，需要在Vue項目的vue.config.js文件中添加如下配置，在css中使用@sprite變量：

module.exports = {
pluginOptions: {
styleResourcesLoader: {
preProcessor: 'scss',
patterns: [path.resolve(__dirname, "src/assets/styles/variables.scss")]
}
}
}

其中，preProcessor指定要使用的CSS預處理器類型，patterns指定使用的全局樣式文件，這里是variables.scss文件。

然后，在variables.scss文件中定義小圖標的樣式：

$i1-width: 22px;
$i2-width: 30px;
$i1-position: -3px -3px;
$i2-position: -3px -35px;
$i1-background: url('~@/assets/images/sprite.png') $i1-position / $i1-width;
$i2-background: url('~@/assets/images/sprite.png') $i2-position / $i2-width;
@sprite: $i1-background $i2-background;

在上述代碼中，定義了兩個小圖標的寬度和位置，并使用url()指定了雪碧圖的位置和大小，最后將兩個小圖標定義為@sprite變量。（注：url()中的~@指的是靜態資源的相對路徑）。

最后，在需要使用小圖標的地方，只需引用@sprite變量即可。

以上就是Vue CLI中使用雪碧圖的詳細步驟和示例代碼。通過使用Vue CLI的雪碧圖功能，可以減少HTTP請求次數，提高頁面性能，同時提高開發效率，避免手動合并小圖標。