1. 程式人生 > >vue專案通過webpack打包生成的dist檔案放到express裡邊執行(vue+webpack+express)

vue專案通過webpack打包生成的dist檔案放到express裡邊執行(vue+webpack+express)

通過Vue漸進式框架寫了一個專案,專案寫完後,通過npm run bulid 生成上線檔案dist。但是在執行npm run bulid這條命令的 時候居然報錯,


提示我什麼缺少bulid,開啟package.json看了一下,命名在的啊。


通過與它對應的 node bulid/bulid.js  居然可以。現在通過webpack已經把所有檔案進行整合到一起了。


你不可能之間通過瀏覽器開啟index.html去看我們的結果。打包之後,webpack也有提示:這個檔案需要放到一個

HTTP伺服器上執行。直接開啟index.html是不能工作的。


所以,這個dist檔案是要部署到伺服器上的。可以通過node的框架express來生成一個伺服器。(要先安裝node和express)

然後通過express生成一個應用。

1,安裝生成器

我們採用全域性安裝生成器: npm install -g express-generator

安裝如下:


2,建立應用

express 專案的名稱


3,安裝依賴包

通過提示,我們知道,還需要執行下面兩個命令:



執行如下:


應用生成器建立完成,把我們dist裡邊檔案放到public檔案裡邊。


通過npm start執行,然後開啟瀏覽器,輸入http://localhost:3000,即可看到專案在開發時的效果了。