vue項目經過webpack打包生成的dist文件放到express環境裏運行（vue+webpack+express）

1.首先須要的原料確定是vue打包生成的dist文件

在vue項目目錄下運行：npm run build，等待運行結束，會在項目目錄下生成一個dist文件夾，裏面會生成一些文件(以下圖示)

小的項目文件會少些、、

2.安裝express本地服務器

能運行起來npm run build我就默認你們不是小白嘍，這邊一樣須要node環境，在環境中運行

npm install -g express-generator

等待安裝完畢，可經過運行：express --version驗證express是否安裝成功（以下圖示）

3.建立本地服務器（應用）

在個人電腦某盤符下，運行

express myProject

其中的myProject即爲最終的服務器文件夾名稱，可自定義。

等待安裝完成，運行

cd myProject

進入項目，安裝依賴

npm i

到此，本地服務器建立完成。打開服務器目錄（以下圖示）

4.運行vue打包項目

 將vue打包生成的dist文件夾下的文件複製、粘貼至上圖示中的public目錄下（以下圖示）

箭頭所指爲dist目錄下文件（項目內容不一樣，生成文件會有所不一樣），其他爲默認文件，不用理會。

此時，運行

npm start

而後打開瀏覽器，輸入http://localhost:3000，便可看到項目在上線後的效果了。

 

另外一種簡單的方法，使用live-server第三方包。

首先全局安裝live-server： npm install -g live-server

而後在打包好的目錄下運行：live-server --port=9527

項目就會自動打開，超級方便吧！

 

後記：查看本機全局安裝的npm包命令：npm list -g --depth 0

 

到此vue打包後的項目便可在本地預覽，全篇結束。