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