Vue CLI是Vue.js的標(biāo)準(zhǔn)腳手架工具，它為我們提供了構(gòu)建Vue.js項(xiàng)目時所需的一切。在Vue CLI中，我們可以使用Vue CLI提供的各種配置選項(xiàng)來自定義我們的項(xiàng)目。在這篇文章中，我們將重點(diǎn)介紹如何在Vue CLI項(xiàng)目中使用圖片。

Vue CLI默認(rèn)支持使用圖片，我們只需要將圖片文件存放在項(xiàng)目的src/assets目錄下即可。接下來，我們可以在.vue文件中使用img標(biāo)簽來引用圖片，如下所示：

我們還可以使用require函數(shù)來動態(tài)引用圖片，如下所示：

在Vue CLI中，我們也可以使用CSS來設(shè)置背景圖片，如下所示：

background-image: url(../assets/bg.png);

在開發(fā)模式下，我們可以直接使用圖片的相對路徑來引用。但是在生產(chǎn)模式下，我們需要為圖片生成正確的路徑，以便正確地將它們加載到網(wǎng)頁中。為了解決這個問題，Vue CLI提供了兩個選項(xiàng)：publicPath和assetsDir。

publicPath用于指定生成的HTML文件中資源的根目錄，而assetsDir用于指定存放靜態(tài)資源（圖片、音視頻等）的目錄。我們可以在Vue CLI的配置文件vue.config.js中進(jìn)行相應(yīng)的配置，如下所示：

module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/my-project/'
: '/',
assetsDir: 'static'
}

這樣，在生產(chǎn)模式下，我們將生成的HTML文件和靜態(tài)資源都存放在/my-project/目錄下。