我們知道使用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就可以看到效果了。例如我的是這樣的: