vue-cli構建項目 npm run build后應該怎么運行在本地查看效果


問題來啦

運行npm run dev以開發模式打開調試好了你的案例程序;你還不滿足於僅僅把代碼放在github上,想直接能把案例效果build版本的代碼在本地預覽或者放在你的個人博客上供大家直接看效果學習。

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

tips

估計看到這里你是不是第一感覺說:不是警告色,說明應該沒啥問題吧,(也許是英語不過關也許是懶得不想看反正是沒看這段提示是什么意思)抱着試試看的僥幸心理,默默用瀏覽器打開了你剛build生成的dist目錄下的index.html文件!

然而,你驚奇地發現網頁一片空白,絲毫沒有一點點痕跡。。。

a

接下來,你默默的打開了控制台,看到console tab下一片404的各種找不到資源;如下圖:

error

為什么會這樣呢?還得從第一幅圖的build后的提示說起,提示的中文翻譯是【提示:構建文件務必放在一個HTTP服務器。直接打開index.html文件將不工作】

所以你看到控制台里的一堆404

解決方案

仔細看一下路徑,絕對路徑,F盤下哪有static文件夾,那就要將打包的路徑改為相對路徑。這個根據build命令一路跟蹤,到項目目錄下的config文件夾里的index.js文件中的build對象,將assetsPublicPath中的“/”,改為“./”即可,就在前面加個點就可以了,並在build\build.js將這兩句的提示信息刪掉或注釋掉,再打包直接用瀏覽器直接運行就好了。

12

現在再重新打包一次 npm run build,刷新你的頁面或者還去你的dist目錄下直接用瀏覽器打開里面的index.html文件即可看到資源都找到了!

歡迎加入我的前端群,大家一起討論Vue相關前端話題,前端老司機群:3851 8473

福利贈送

我做的vue 2.0系列QQ音樂單頁面應用程序,文章截圖是早期版本,目前效果比較完善了,建議clone到本地查看效果或查看在線效果。

預覽地址(切換到手機瀏覽器模式查看): 點這里

github地址:https://github.com/chengjun2014/qq_music

enter image description here


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM