在Vue CLI中，static目錄是一個(gè)專門用于存放靜態(tài)資源的目錄，包括圖片、字體、視頻等等。這些靜態(tài)資源不會被webpack打包處理，而是原樣復(fù)制到發(fā)布目錄中（默認(rèn)是dist目錄），在瀏覽器中直接引用。在本文中，我將詳細(xì)介紹如何在Vue CLI中使用static目錄存放以及引用圖片。

首先，進(jìn)入Vue CLI創(chuàng)建的項(xiàng)目文件夾中，找到static目錄，如果沒有則自己新建。在該目錄下新建一個(gè)文件夾，比如說我這里新建了一個(gè)images文件夾，專門用于存放圖片。接著，在該文件夾中添加你需要的圖片，比如說我這里添加了一個(gè)名為logo.png的圖片。

static
│  ...
└─images
│  logo.png
│  ...

在Vue組件中，我們可以使用標(biāo)簽來顯示圖片，通常我們可以通過url的方式引用一個(gè)圖片，比如下面這個(gè)例子：

但是，在Vue CLI中我們通常不使用上述方式，而是使用相對路徑引用靜態(tài)資源。比如說，我們想在Vue組件中使用static目錄下的logo.png這個(gè)圖片，應(yīng)該這樣寫：

這樣就可以成功引用到logo.png這個(gè)圖片了。需要注意的是，引用靜態(tài)資源的相對路徑是基于webpack編譯后的輸出目錄來計(jì)算的，也就是說如果你修改了webpack的編譯輸出目錄（比如使用了webpack的output.path選項(xiàng)），那么就要相應(yīng)地修正靜態(tài)資源的引用路徑。

除了使用相對路徑引用靜態(tài)資源外，我們還可以使用@符號來引用，@代表src目錄。比如說，我們想在src/components/HelloWorld.vue組件中引用static/images/logo.png這個(gè)圖片，應(yīng)該這樣寫：

這樣就可以成功引用到logo.png這個(gè)圖片了。需要注意的是，使用@符號引用靜態(tài)資源需要在webpack的resolve.alias字段中（位于webpack.config.js中）對src目錄配置別名才可以使用。默認(rèn)情況下，Vue CLI已經(jīng)對@符號配置了別名，所以我們可以放心使用。

總的來說，Vue CLI中的static目錄是用于存放靜態(tài)資源的，比如圖片、字體、視頻等等。我們可以使用相對路徑或者@符號引用這些靜態(tài)資源，雖然Vue CLI不會對這些靜態(tài)資源進(jìn)行打包處理，但卻是發(fā)布到服務(wù)器中的核心資源之一，所以我們需要特別注意。