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è)面空白問題
根據(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,嗯完成了，后面的也沒有看，直接打開了生成的dist文件夾下的index.html
打開后出現(xiàn)一個(gè)空白頁(yè)面，并且控制臺(tái)是上面這樣的。
解決辦法：
執(zhí)行下面命令：
npm install http-server -g 全局
然后在dist文件下執(zhí)行：
http-server
http-server
直接打開上面的網(wǎng)址訪問就可以了。
以上這篇Vue-cli打包后如何本地查看的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue下跨域設(shè)置的相關(guān)介紹，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-08-08
Vue3.2.x中的小技巧及注意事項(xiàng)總結(jié)
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,是目前最火的前端框架之一,是前端工程師的必備技能,下面這篇文章主要給大家介紹了關(guān)于Vue3.2.x中的小技巧及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-04-04
elementui?el-upload一次請(qǐng)求上傳多個(gè)文件的實(shí)現(xiàn)
使用ElementUI?Upload的時(shí)候發(fā)現(xiàn)如果是默認(rèn)方案,上傳多張圖片并不是真正的一次上傳多張,本文就來(lái)介紹一下elementui?el-upload一次請(qǐng)求上傳多個(gè)文件的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
Vue?通過this.$emit()方法子組件向父組件傳值(步驟分享)
這篇文章主要介紹了Vue?this.$emit()方法通過子組件向父組件傳值,第一步在父組件中引入子組件，第二步子組件向父組件傳值，本文通過需要的朋友可以參考下2022-11-11
這篇文章主要給大家介紹了關(guān)于Vue生命周期的那些事,在使用vue開發(fā)過程中經(jīng)常會(huì)接觸到生命周期的問題,但對(duì)于每個(gè)鉤子函數(shù)都做了什么,應(yīng)用場(chǎng)景比較模糊,希望通過這次梳理讓自己清楚一些,需要的朋友可以參考下2021-09-09
關(guān)于前端報(bào)“應(yīng)為聲明或語(yǔ)句。ts(1128)“的原因及解決方案
最近在學(xué)習(xí)中遇到了個(gè)不常見的報(bào)錯(cuò),這里給大家總結(jié)下解決的辦法,這篇文章主要給大家介紹了關(guān)于前端報(bào)“應(yīng)為聲明或語(yǔ)句,ts(1128)“的原因及解決方案,需要的朋友可以參考下2024-08-08
這篇文章主要為大家詳細(xì)介紹了Vue下拉菜單組件化開發(fā)過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue 實(shí)現(xiàn)手動(dòng)刷新組件的方法
這篇文章主要介紹了Vue 實(shí)現(xiàn)手動(dòng)刷新組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-02-02
這篇文章主要介紹了vue實(shí)現(xiàn)圖片懶加載的方法,結(jié)合實(shí)例形式分析了vue.js圖片懶加載插件安裝、使用方法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
vue實(shí)現(xiàn)會(huì)議室拖拽布局排座功能
vue-draggable-resizable-gorkys是一更強(qiáng)大的拖拽組件,可以隨意拖拽,有點(diǎn)坐標(biāo),會(huì)議室拖拽布局排座是vue-draggable結(jié)合vue-draggable-resizable-gorkys進(jìn)行開發(fā)的,本文重點(diǎn)給大家介紹vue實(shí)現(xiàn)會(huì)議室拖拽布局排座,感興趣的朋友一起看看吧2023-11-11