問題來啦
運行npm run dev
以開發模式打開調試好了你的案例程序;你還不滿足於僅僅把代碼放在github
上,想直接能把案例效果build
版本的代碼在本地預覽或者放在你的個人博客上供大家直接看效果學習。
這時如果直接運行npn run build
是可以運行並打包你的代碼的,不會報任何異常或錯誤,但是你會看到你的命令行打包完成有這樣一句提示:
估計看到這里你是不是第一感覺說:不是警告色,說明應該沒啥問題吧,(也許是英語不過關也許是懶得不想看反正是沒看這段提示是什么意思)抱着試試看的僥幸心理,默默用瀏覽器打開了你剛build
生成的dist
目錄下的index.html
文件!
然而,你驚奇地發現網頁一片空白,絲毫沒有一點點痕跡。。。
接下來,你默默的打開了控制台,看到console tab
下一片404
的各種找不到資源;如下圖:
為什么會這樣呢?還得從第一幅圖的build
后的提示說起,提示的中文翻譯是【提示:構建文件務必放在一個HTTP
服務器。直接打開index.html
文件將不工作】
所以你看到控制台里的一堆404
!
解決方案
仔細看一下路徑,絕對路徑,F
盤下哪有static
文件夾,那就要將打包的路徑改為相對路徑。這個根據build
命令一路跟蹤,到項目目錄下的config
文件夾里的index.js
文件中的build
對象,將assetsPublicPath
中的“/”
,改為“./”
即可,就在前面加個點就可以了,並在build\build.js
將這兩句的提示信息刪掉或注釋掉,再打包直接用瀏覽器直接運行就好了。
現在再重新打包一次 npm run build
,刷新你的頁面或者還去你的dist
目錄下直接用瀏覽器打開里面的index.html
文件即可看到資源都找到了!
歡迎加入我的前端群,大家一起討論Vue相關前端話題,前端老司機群:3851 8473
福利贈送
我做的vue 2.0系列QQ音樂單頁面應用程序,文章截圖是早期版本,目前效果比較完善了,建議clone到本地查看效果或查看在線效果。
預覽地址(切換到手機瀏覽器模式查看): 點這里
github地址:https://github.com/chengjun2014/qq_music