Vue-cli打包后如何本地查看的操作
Vue-cli打包成dist后默認(rèn)是必須在http服務(wù)器環(huán)境下才能正常運(yùn)行。
可以在本地啟動(dòng)一個(gè)http-server服務(wù)查看，操作步驟如下：
全局安裝http-server：
npm install -g http-server
進(jìn)入dist根目錄下
cd dist
再輸入指令：
serve
輸出serve: Running on port 5000,即服務(wù)已經(jīng)啟動(dòng)，端口號(hào)為5000。
以其他的端口號(hào)啟動(dòng)：
serve -p 8090
補(bǔ)充知識(shí)：vue cli3.0 打包并在本地查看時(shí)頁(yè)面空白問(wèn)題
根據(jù)以下命令對(duì)項(xiàng)目進(jìn)行打包：
npm run build
命令執(zhí)行完出現(xiàn)
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
看了一下，build complete,嗯完成了，后面的也沒(méi)有看，直接打開(kāi)了生成的dist文件夾下的index.html
打開(kāi)后出現(xiàn)一個(gè)空白頁(yè)面，并且控制臺(tái)是上面這樣的。
解決辦法：
執(zhí)行下面命令：
npm install http-server -g 全局
然后在dist文件下執(zhí)行：
http-server
http-server
直接打開(kāi)上面的網(wǎng)址訪問(wèn)就可以了。
以上這篇Vue-cli打包后如何本地查看的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
npm ERR! code 128的錯(cuò)誤問(wèn)題解決方法
這篇文章主要介紹了解決npm ERR! code 128的錯(cuò)誤問(wèn)題,本文給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
vue項(xiàng)目啟動(dòng)后沒(méi)有局域網(wǎng)地址問(wèn)題
這篇文章主要介紹了vue項(xiàng)目啟動(dòng)后沒(méi)有局域網(wǎng)地址問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
在本篇文章里小編給各位分享的是關(guān)于Vue發(fā)布項(xiàng)目的實(shí)例內(nèi)容以及知識(shí)點(diǎn)講解，需要的朋友們參考下。2019-07-07
vue3通過(guò)canvas實(shí)現(xiàn)圖片圈選功能
這篇文章將給大家詳細(xì)介紹了vue3如何通過(guò)canvas實(shí)現(xiàn)圖片圈選功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴快來(lái)跟隨小編一起學(xué)習(xí)一下吧2023-12-12
這篇文章主要介紹了Vue body樣式修改方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了用vue快速開(kāi)發(fā)app的腳手架工具，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
這篇文章主要介紹了Vue如何指定不編譯的文件夾和favicon.ico，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
progressbar組件在一個(gè)可以直接運(yùn)行的npm包，通過(guò)Yeoman進(jìn)行構(gòu)建，再通過(guò)Gulp+Webpack構(gòu)建工具。這篇文章給大家介紹了Vue進(jìn)度條progressbar組件2018-04-04
vue自定義表格列的實(shí)現(xiàn)過(guò)程記錄
這篇文章主要給大家介紹了關(guān)于vue自定義表格列的相關(guān)資料,表格組件在開(kāi)發(fā)中經(jīng)常會(huì)用到,文章通過(guò)示例代碼介紹的也很詳細(xì),需要的朋友可以參考下2021-06-06
vue實(shí)現(xiàn)書(shū)本翻頁(yè)動(dòng)畫(huà)效果實(shí)例詳解
這篇文章主要介紹了vue簡(jiǎn)單實(shí)現(xiàn)書(shū)本翻頁(yè)效果,需要的朋友可以參考下2022-04-04