1. 程式人生 > >vue-cli構建專案 npm run build打包後怎麼在本地檢視效果

vue-cli構建專案 npm run build打包後怎麼在本地檢視效果

本文以vue官方腳手架vue-cli構建的專案為例。

執行npm run dev以開發模式開啟除錯好了你的案例程式;你還不滿足於僅僅把程式碼放在github上,想把專案打包,然後在本地預覽或者放在個人部落格上供大家直接看效果學習。

這時如果直接執行npn run build是可以執行並打包你的程式碼的,不會報任何異常或錯誤,但是會看到打包完成有這樣一句提示:

這裡寫圖片描述

看到這裡第一感覺:不是警告色,應該沒啥問題,(也許是英語不過關也許是懶得不想看反正是沒看這段提示是什麼意思)抱著試試看的僥倖心理,默默用瀏覽器打開了剛build生成的dist目錄下的index.html檔案!

然而驚奇地發現網頁一片空白,絲毫沒有一點點痕跡。打開了控制檯,看到console tab下一片404的各種找不到資源

解決方案

開啟專案資料夾。找到config資料夾裡的index.js檔案中的build物件,將assetsPublicPath中的“/”,改為“./”,並在build\build.js將這兩句的提示資訊刪掉或註釋掉,再打包直接用瀏覽器直接執行就好了。

親測有效