通過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">和背景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處理靜態資源的方法及webpack打包的坑，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持！

網頁題目：vue-cli與webpack處理靜態資源的方法及webpack打包的坑
網頁鏈接：http://m.newbst.com/article24/ppicje.html

成都網站建設公司_創新互聯，為您提供網站收錄、靜態網站、做網站、網站改版、電子商務、網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯