Vue項目打包問題
阿新 • • 發佈:2018-08-29
ebp ESS ets visual 資源 靜態文件處理 方法 asset 宋體
用vux初始化的一個項目中,做了輪播圖和欄目菜單,都有用到img標簽
<ul class="mensul"> <li> <a href="#">菜單1</a> <img src="../assets/browser.png" alt=""> </li> <li> <a href="#">菜單2</a> <img src="../assets/農業_1.png"alt=""> </li> <li> <a href="#">菜單3</a> <img src="../assets/message.png" alt=""> </li> <li> <a href="#">菜單4</a> <img src="../assets/video.png" alt=""> </li> </ul>
全部的img標簽都是訪問本地的靜態資源文件
對項目進行打包部署測試
“npm run build”
生成的dist文件:
vs和src文件手動生成的(vs文件是用visual studio 當做微型服務器訪問dist文件實現預覽效果)
build之前和build之後的靜態文件(圖片)對比
發現問題:
1:img文件如果小於10k會被直接build在項目中,不會被當做靜態文件處理;
2:變量中聲明img路徑,會被當做字符串處理;
3:預覽中,發現訪問輪播圖空白(訪問路徑錯誤,打包未被處理,不存在)
處理方法:
1:手動復制對應的文件粘貼到dist中,使訪問不存在問題
2:webpack中進行配置(這個要研究一下才能進行)
Vue項目打包問題