如果你正在使用Vue，那么你可能會使用Vue CLI來幫助你創建和構建項目。在Vue CLI的構建過程中，有許多需要打包的文件，其中包括圖片。本文將介紹如何使用Vue CLI打包圖片。

首先，我們需要將圖片放入項目中。一般來說，我們將圖片放入static文件夾中，因為該文件夾中的文件不會被webpack打包重命名，而是直接復制到打包后的文件夾中。因此，在項目中引用圖片時，我們只需要使用相對static文件夾路徑即可。

// 在template或style中使用圖片
<img src="~/static/img/demo.jpg">
background-image: url('~static/img/demo.jpg');

然后，我們需要配置webpack，以便在打包時正確地處理圖片。在Vue CLI中，我們可以在vue.config.js文件中配置webpack。

// vue.config.js中的webpack配置
module.exports = {
chainWebpack: config =>{
config.module.rules.delete('images')
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 10000,
name: 'img/[name].[hash:8].[ext]'
})
.end()
}
}

在上面的配置中，我們首先刪除了Vue CLI中默認的處理圖片的規則。然后，我們添加了一個新的規則，這個規則會使用url-loader來處理圖片。url-loader是一個webpack的loader，它將圖片轉換成base64編碼的字符串，并將其嵌入到打包后的文件中（如果圖片的大小小于limit選項的值）。如果圖片的大小大于limit選項的值，就會將圖片打包成一個單獨的文件，然后使用file-loader來處理。

在上面的配置中，我們將limit選項設置為10000，意味著如果圖片的大小小于10kb，那么它會被轉換為base64編碼的字符串。我們還將圖片的打包路徑設置為'img/[name].[hash:8].[ext]'，其中[name]會被替換成圖片的原始文件名，[hash:8]會被替換成文件的哈希值，[ext]會被替換成文件的擴展名。

最后，我們就可以在項目中使用圖片了！

// 在template或style中使用圖片
<img src="~/static/img/demo.jpg">
background-image: url('~static/img/demo.jpg');

總結一下，在Vue CLI中打包圖片需要以下幾個步驟：

• 將圖片放入項目中，通常放在static文件夾中；
• 在vue.config.js中配置webpack，使其正確處理圖片；
• 在template或style中使用圖片，使用相對static文件夾路徑。