親測(cè)，webpack打包vue項(xiàng)目之后生成的dist文件可以部署到 express 服務(wù)器上運(yùn)行。

我的vue項(xiàng)目結(jié)構(gòu)如下：

1. 進(jìn)入該vue項(xiàng)目目錄，打開git bash，執(zhí)行：npm run build(在package.json的scripts配置)

執(zhí)行成功如下圖所示：

然后此時(shí)你會(huì)發(fā)現(xiàn)項(xiàng)目下多了一個(gè) dist 文件夾，dist下文件便是項(xiàng)目打包之后生成的文件。

此時(shí)我們直接在瀏覽器中打開index.html，是會(huì)報(bào)錯(cuò)的，什么都看不到。

2. 安裝express-generator生成器

執(zhí)行  $ npm install express-generator -g  進(jìn)行安裝

3. 創(chuàng)建一個(gè)express項(xiàng)目

執(zhí)行  $ express expressDemo （expressDemo是項(xiàng)目名）

expressDemo項(xiàng)目目錄如下圖:

4. 進(jìn)入expressDemo目錄，安裝項(xiàng)目依賴

$ cd expressDemo                                        
$ npm install 

5. 把dist目錄下的所有文件復(fù)制到express項(xiàng)目的public文件夾下

然后運(yùn)行 $ npm start 啟動(dòng)expressDemo

打開瀏覽器，輸入 http://localhost:3000 , 就可以看到效果了

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。