【轉】在生產環境中部署前端代碼

在生產環境中部署前端代碼

本文章前端代碼是基於vue+webpack開發的

Nginx是一款輕量級的Web 服務器/反向代理服務器

首先，webpack配置以下

在開發過程當中，咱們是經過npm run dev在開發環境中運行代碼
若是要部署到生產環境中，能夠運行npm run build進行上線打包

打包完成後，會發現項目中多了dist這個文件夾

執行結果和webpack的配置文件一致。

代碼被webpack打包完成後下一步就是部署到服務器上，此文僅適合於前端代碼是部署在windows操做系統的nginx服務中。
這裏假設：
Windows操做系統：windows server 2008 64位
Nginx服務：nginx-1.12.2 64位

1.下載nginx-1.12.2 64位解壓，假設nginx-1.12.2放在D:nginx-1.12.2目錄中，nginx目錄結構。如圖下

二、前端代碼放在D:nginx-1.12.2html目錄中，dist目錄就是剛剛前端打包完的代碼。如圖下

三、在D:nginx-1.12.2conf目錄中，有個nginx.conf配置文件，進行編輯這個文件

四、假設前端的端口號爲8082，若是端口號被佔用，請修改成其它端口號。後臺服務訪問地址http://192.168.121.**:8080,

五、打開cmd控制檯，進入目錄D:nginx-1.12.2中，用start nginx命令啓動服務，而後用tasklist /fi "imagename eq nginx.exe"，查看nginx服務是否啓動。

四、若是改變配置文件時，須要用nginx -s reload 命令重啓nginx工做進程。

五、關閉服務
nginx -s stop 
nginx -s quit 安全關閉 
taskkill /F /IM nginx.exe > nul 關閉全部nginx服務

若是有錯漏請你們批評指出！