使用webpack打包后的vue項目如何正確運行（express）
更新時間：2018年10月26日 10:20:34 作者：江峰★
這篇文章主要介紹了使用webpack打包后的vue項目如何正確運行（express） ,接下來通過本文給大家詳細介紹，需要的朋友可以參考下
我們知道使用webpack打包vue項目后會生成一個dist文件夾，dist文件夾下有html文件和其他css、js以及圖片等，那么打包后的文件該如何正確運行呢？
倘若直接打開html文件，會報如下錯誤：
那么該如何運行呢？其實可以將生成的dist文件部署到express服務器上運行。
?。?）、安裝express-generator生成器。
npm install express-generator -g // 也可使用cnpm比較快
?。?）、創(chuàng)建一個express項目。
express expressName // expressName是項目名
?。?）、進入項目目錄，安裝相關項目依賴?！ ?/p>
cd expressName npm install // 或cnpm install
?。?）、此時生成的項目目錄應該是這樣的：
（5）、將dist文件夾下的所有文件復制到express項目的publick文件夾下面，然后運行npm start來啟動express項目。
?。?）、打開瀏覽器，輸入localhost:3000就可以看到效果了。例如我的是這樣的：
總結
以上所述是小編給大家介紹的使用webpack打包后的vue項目如何正確運行（express），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要為大家詳細介紹了如何使用Vue3自定義實現(xiàn)一個類似el-input的組件,可以v-model雙向綁定,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
computed是vue的配置選項,它的值是一個對象,其中可定義多個計算屬性,每個計算屬性就是一個函數(shù),下面這篇文章主要給大家介紹了關于vue中計算屬性computed的詳細講解,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue中的驗證登錄狀態(tài)的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
本文給大家介紹Vue 實現(xiàn)穿梭框功能，代碼分為css，html和js代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-10-10
這篇文章主要介紹了vue 二維碼長按保存和復制內(nèi)容操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
基于vue-draggable 實現(xiàn)三級拖動排序效果
這篇文章主要介紹了基于vue-draggable 實現(xiàn)三級拖動排序效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
本篇文章主要介紹了Vue組件開發(fā)初探，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過程,稱這是Vue的?命周期2022-10-10
這篇文章主要介紹了Vue項目中使用iView組件庫設置樣式不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue & vue Cli 版本及對應關系，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07