使用webpack打包后的vue項目如何運行(express)


  我們知道使用webpack打包vue項目后會生成一個dist文件夾,dist文件夾下有html文件和其他css、js以及圖片等,那么打包后的文件該如何正確運行呢?

  倘若直接打開html文件,會報如下錯誤:

    

  那么該如何運行呢?其實可以將生成的dist文件部署到 express 服務器上運行。

  (1)、安裝express-generator生成器。

     npm install express-generator -g // 也可使用cnpm比較快 

  

  (2)、創建一個express項目。

     express expressName // expressName是項目名 

 

  (3)、進入項目目錄,安裝相關項目依賴。

     cd expressName 

     npm install // 或cnpm install 

 

  (4)、此時生成的項目目錄應該是這樣的:

      

 

  (5)、將dist文件夾下的所有文件復制到express項目的publick文件夾下面,然后運行  npm start 來啟動express項目。

 

  (6)、打開瀏覽器,輸入localhost:3000就可以看到效果了。例如我的是這樣的: 

    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM