在前端開發中，我們常常會使用CSS Sprite技術來優化網站性能。雪碧圖是將多張小圖片合并成一張大圖片，通過CSS定位技術，只顯示需要的部分，從而減少HTTP請求次數，提高網頁響應速度。在Vue中，我們可以使用webpack提供的雪碧圖插件進行自動化處理，減少手動操作的繁瑣和出錯風險。

首先，我們需要安裝兩個依賴包：spritesmith和webpack-spritesmith。其中spritesmith是雪碧圖合并的核心包，webpack-spritesmith是與webpack配合使用的插件。通過npm安裝即可：

npm install spritesmith webpack-spritesmith --save-dev

接下來，在webpack的配置文件中，需要在plugins選項中配置webpack-spritesmith插件，具體如下：

const SpritesmithPlugin = require('webpack-spritesmith');
module.exports = {
// ...其他配置
plugins: [
// ...
new SpritesmithPlugin({
// 源圖片，可以是數組或字符串格式
src: {
cwd: path.resolve(__dirname, 'src/assets/icon'),
glob: '*.png'
},
// CSS文件會輸出到該目錄下
target: {
image: path.resolve(__dirname, 'src/assets/sprite.png'),
css: path.resolve(__dirname, 'src/assets/_sprite.scss')
},
// CSS文件引用的雪碧圖路徑，按需修改
apiOptions: {
cssImageRef: './sprite.png'
}
})
]
}

上述配置中，我們指定了源圖片的路徑和匹配規則（這里假設源圖片都是在src/assets/icon目錄下，以.png后綴結尾），以及雪碧圖和CSS文件輸出路徑。注意，CSS路徑一定要與圖片路徑一致。如果在CSS中有url函數引用其他圖片的話，也需要按照相對路徑修改。

最后，在樣式文件中，我們需要導入生成的CSS文件，并按需使用其中定義的類名即可。例如：

@import '../assets/_sprite.scss';
.selector {
// 使用雪碧圖中名為icon-home的圖片
@include sprite(icon-home);
}

其中@include指令會將目標類名轉換為指定圖標在雪碧圖中的位置和尺寸，并設置為background-position和background-size屬性的值。如果需要調整圖標的位置和大小，或者自定義命名規則，可以修改_sprites.scss文件中的定義。

通過webpack的自動化處理，我們可以很方便地生成雪碧圖和對應的CSS代碼，避免手動拼接和調整的繁瑣工作。同時，在引用圖片時也更加靈活，可以通過類名來控制樣式，而不是通過具體的文件路徑。