vue-cli與webpack處理靜態資源的方法
- 小云云原創
- 2018-05-15 16:18:372083瀏覽
處理靜態資源
你或許會注意到vue-cli與webpack結合的專案中，我們通常會有兩個靜態資源的路徑：src/assets和static/ ，他們兩者的差別是什麼呢？本文主要跟大家介紹了vue-cli與webpack結合如何處理靜態資源，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
打包的資源
為了回答這個問題，我們首先要明白Webpack是如何處理靜態資源的。在*.vue元件裡，所有的templates和CSS模組都被vue-html-loader和css-loader解析來查找路徑URL。
舉個例子，在c24d6e8f8360da4c3f2e5ccb6fc32191和背景background: url(./logo.png)，」./logo.png」是相對路徑，會被Webpack當作一個依賴載入。
但因為logo.png並不是JavaScript，所以如果被當成一個依賴的花，我們需要透過url-loader和file-loader來解析它。這個範本已經為你配置了對應的loader，所以你通常不用擔心相對路徑的部署問題。
即使這些資源有可能在建置過程中被內聯/拷貝/重命名，他們也是原始碼重要組成部分。這就是為什麼我們建議單獨在/src資料夾中放置靜態資源，如同其他的資源資料夾。
事實上，你不必把他們全放在/src/assets，你可以根據模組/元件來組織利用他們。比如說，你可以把任一元件放到自己的目錄，並在該目錄下存放靜態資源。
資源引入規則
相對路徑，例如 ./assets/logo.png會被解析成模組依賴。它們會被一個基於你Webpack輸出配置的自動產生URL取代。
沒有前綴的路徑，例如assets/logo.png，同相對路徑，轉義成./assets/logo.png
有~前綴的路徑。 ~被認為是一個模組請求，同require('some-module/image.png')。根路徑，例如/assets/log.png
在JavaScript得到資源路徑
computed: {
background () {
return require('./bgs/' + this.id + '.jpg')
}
}這個資源路徑同樣會被file-loader處理然後返回處理後的路徑。而且Webpack會一次載入該bgs目錄下的所有圖片。
「真實的」靜態資源
與此相對的，static/中的檔案全都不會被Webpack處理。它們將直接拷貝到目標資料夾，引用這些檔案需要使用絕對路徑。
相關推薦：
以上是vue-cli與webpack處理靜態資源的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！