vue-cli+webpack處理靜態資源及webpack打包步驟詳解
- php中世界最好的语言原創
- 2018-05-21 13:47:121592瀏覽
這次帶給大家vue-cli webpack處理靜態資源及webpack打包步驟詳解，vue-cli webpack處理靜態資源及webpack打包的注意事項有哪些，下面就是實戰案例，一起來看一下。
透過Vue-cli進行webpack打包的坑
#Vue-cli為Vue專案搭建的鷹架的確很方便，但打包時容易出現空白頁，或是對應的靜態資源載入不了。
我是透過將專案/config下的index.js的assetsPublicPath變成'./'，變成相對路徑，進行解決。
cd vue demo npm run dev //运行程序 npm run bulid //webpack打包
處理靜態資源
你或許會注意到vue-cli與webpack結合的專案中，我們通常會有兩個靜態資源的路徑：src/assets和static/，他們兩者的差別是什麼呢？本文主要跟大家介紹了vue-cli與webpack結合如何處理靜態資源，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
打包的資源
為了回答這個問題，我們首先要明白Webpack是如何處理靜態資源的。在*.vue元件裡，所有的templates和CSS模組都被vue-html-loader和css-loader解析來查找路徑URL。
舉個例子，在<img src"./logo.png">和背景<a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>: 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
有~前綴的路徑。 ~被認為是模組請求，同<a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>('some-module/image.png')。根路徑，例如/assets/log.png
在JavaScript得到資源路徑
computed: {
background () {
return require('./bgs/' + this.id + '.jpg')
}
}
這個資源路徑同樣會被file-loader處理然後返回處理後的路徑。而且Webpack會一次載入該bgs目錄下的所有圖片。
「真實的」靜態資源
與此相對的，static/中的檔案全都不會被Webpack處理。它們將直接拷貝到目標資料夾，引用這些檔案需要使用絕對路徑。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是vue-cli+webpack處理靜態資源及webpack打包步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！