靜態(tài)資源處理
通過vue-cli腳手架構建的vue項目有兩個放置靜態(tài)資源的地方把夸，分別是src/assets文件夾和static文件夾宙帝，一般情況下：
static
static放不會變動的文件
static 目錄下的文件并不會被Webpack處理：它們會直接被復制到最終的打包目錄（默認是dist/static）下。必須使用絕對路徑引用這些文件端逼，這是通過在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 連接來確定的洗贰。
assets
assets放可能會變動的文件
assets目錄中的文件會被webpack處理解析為模塊依賴，只支持相對路徑形式嫉晶。例如骑疆，在 <img src="./logo.png">和 background: url(./logo.png)中，./logo.png是相對的資源路徑替废，將由Webpack解析為模塊依賴箍铭。
因為 logo.png 不是 JavaScript，當被視為模塊依賴時椎镣，需要使用 url-loader 和 file-loader處理它诈火。vue-cli 的 webpack 腳手架已經(jīng)配置了這些 loader，因此可以使用相對路徑引用状答。
資源處理規(guī)則
- 相對URL：
./assets/logo.png將會被解釋成一個模塊依賴冷守。它們會被一個基于你的Webpack輸出配置自動生成的URL替代 - 沒有前綴的URL：
assets/logo.png將會被看成相對URL，并且轉換成./assets/logo.png - 前綴帶
~或者@的URL：
~/assets/logo.png：會被當成模塊請求, 類似于require('some-module/image.png').
通過assets目錄引入的圖片最終都會被轉化成base64字符串的形式顯示：
比如惊科，`build/webpack.base.conf.js`文件中`alias`屬性中設置的路徑別名拍摇，`~`也可設置為`@`符號作為別名
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
- 相對根目錄的URL
/assets/logo.png是不會被處理的
注意
雖然上文說訪問static只支持絕對路徑，訪問assets只支持相對路徑馆截，但是在實際開發(fā)中發(fā)現(xiàn)static相對路徑和絕對路徑都可以訪問資源充活，但是使用絕對路徑的資源經(jīng)過打包必須部署到nginx服務器的根目錄(默認html)蜂莉，否則會出現(xiàn)訪問不到資源的問題，如下圖：
項目部署在nginx服務器子目錄dist混卵，絕對路徑/static/image.png對應的是10.1.5.156:8080/static/image.png,實際應該是10.1.5.156:8080/dist/static/image.png
解決方案：
例如映穗，如果你的應用被部署在
https://www.my-app.com/my-app/，則設置 publicPath 為/my-app/參考文檔
總結
一般在static里面放一些類庫的文件幕随，在assets里面放屬于該項目的資源文件蚁滋。
因此在項目中引用資源的時候最好使用assets的相對路徑引用，同時可解決部署到服務器子目錄導致的資源無法訪問的問題赘淮。
