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

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

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

首先，webpack配置如下

在開發過程中，我們是通過npm run dev在開發環境中運行代碼
如果要部署到生產環境中，可以運行npm run build進行上線打包

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

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

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

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

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

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

4、假設前端的端口號為8082，如果端口號被占用，請修改為其它端口號。後臺服務訪問地址http://192.168.121.**:8080,

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

4、如果改變配置文件時，需要用nginx -s reload 命令重啟nginx工作進程。

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

如果有錯漏請大家批評指出！

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