vue-cli+webpack處理靜態資源及webpack打包步驟詳解

這次帶給大家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 alt="vue-cli+webpack處理靜態資源及webpack打包步驟詳解" >和背景<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中文網其它相關文章！

推薦閱讀：

php呼叫google介面產生二維碼步驟詳解

PHPThumb圖片處理使用步驟詳解

以上是vue-cli+webpack處理靜態資源及webpack打包步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！