使用webpack打包后的vue項(xiàng)目如何正確運(yùn)行（express）
我們知道使用webpack打包vue項(xiàng)目后會(huì)生成一個(gè)dist文件夾，dist文件夾下有html文件和其他css、js以及圖片等，那么打包后的文件該如何正確運(yùn)行呢？
倘若直接打開html文件，會(huì)報(bào)如下錯(cuò)誤：
那么該如何運(yùn)行呢？其實(shí)可以將生成的dist文件部署到express服務(wù)器上運(yùn)行。
（1）、安裝express-generator生成器?！ ?/p>
npm install express-generator -g // 也可使用cnpm比較快
?。?）、創(chuàng)建一個(gè)express項(xiàng)目。
express expressName // expressName是項(xiàng)目名
?。?）、進(jìn)入項(xiàng)目目錄，安裝相關(guān)項(xiàng)目依賴?！ ?/p>
cd expressName npm install // 或cnpm install
?。?）、此時(shí)生成的項(xiàng)目目錄應(yīng)該是這樣的：
?。?）、將dist文件夾下的所有文件復(fù)制到express項(xiàng)目的publick文件夾下面，然后運(yùn)行npm start來(lái)啟動(dòng)express項(xiàng)目。
?。?）、打開瀏覽器，輸入localhost:3000就可以看到效果了。例如我的是這樣的：
總結(jié)
以上所述是小編給大家介紹的使用webpack打包后的vue項(xiàng)目如何正確運(yùn)行（express），希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue中如何解除數(shù)據(jù)之間的雙向綁定，具有很好的參考價(jià)值，希望對(duì)2022-09-09
在Vue中實(shí)現(xiàn)Excel導(dǎo)出功能(數(shù)據(jù)導(dǎo)出)
本文分享了如何在前端導(dǎo)出Excel文件,強(qiáng)調(diào)了前端導(dǎo)出的即時(shí)性、便捷性、靈活性和定制化優(yōu)勢(shì),以及減輕后端服務(wù)器負(fù)擔(dān)的特點(diǎn),詳細(xì)介紹了ExcelJS和FileSaver.js兩個(gè)工具庫(kù)的使用方法和主要功能,最后通過(guò)Vue實(shí)現(xiàn)了Excel的導(dǎo)出功能2024-10-10
在Vue中使用Bootstrap是常見的前端開發(fā)實(shí)踐之一,結(jié)合了Vue的響應(yīng)式數(shù)據(jù)綁定與Bootstrap的UI組件和布局系統(tǒng),能夠快速實(shí)現(xiàn)現(xiàn)代化的網(wǎng)頁(yè)應(yīng)用,本文將詳細(xì)介紹如何在Vue中使用Bootstrap,從安裝到高級(jí)使用,涵蓋了各種常見的開發(fā)場(chǎng)景和技巧,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了vue3渲染函數(shù)(h函數(shù))的變化,文中給大家介紹了h函數(shù)的三個(gè)參數(shù)詳細(xì)說(shuō)明及vue3 h函數(shù)-綁定事件，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
詳解.vue文件中監(jiān)聽input輸入事件（oninput）
本篇文章主要介紹了詳解.vue文件中監(jiān)聽input輸入事件（oninput），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了vuejs父子組件之間的數(shù)據(jù)交互，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue如何解決空格和空行報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了vue如何解決空格和空行報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
現(xiàn)在vue項(xiàng)目基本上都是使用axios進(jìn)行請(qǐng)求操作,下面這篇文章主要給大家介紹了關(guān)于Vue與Axios的傳參方式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
Vue3?路由頁(yè)面切換動(dòng)畫?animate.css效果
這篇文章主要介紹了Vue3路由頁(yè)面切換動(dòng)畫animate.css效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
在uni-app中使用element-ui的方法與報(bào)錯(cuò)解決
我們?cè)陂_web開發(fā)的時(shí)候，經(jīng)常會(huì)使用到element或者uview-ui,下面這篇文章主要給大家介紹了關(guān)于在uni-app中使用element-ui的方法與報(bào)錯(cuò)解決的相關(guān)資料,需要的朋友可以參考下2022-04-04