打包部署
我們的前端工程開發好了，但是我們需要釋出，那麼如何釋出呢？主要分為2步：
- 前端工程打包
- 透過nginx伺服器（點選下載Nginx）釋出前端工程
1 前端工程打包
接下來我們先來對前端工程進行打包
我們直接透過VS Code的NPM指令碼中提供的build按鈕來完整，如下圖所示，直接點選即可：
然後會在工程目錄下生成一個dist目錄，用於存放需要釋出的前端資源，如下圖所示：
2 部署前端工程
2.1 nginx介紹
nginx: Nginx是一款輕量級的Web伺服器/反向代理伺服器及電子郵件（IMAP/POP3）代理伺服器。其特點是佔有記憶體少，併發能力強，在各大型網際網路公司都有非常廣泛的使用。
niginx在windows中的安裝是比較方便的，直接解壓即可。所以我們直接將資料中的nginx-1.22.0.zip壓縮檔案複製到無中文的目錄下，直接解壓即可，如下圖所示就是nginx的解壓目錄以及目錄結構說明：
很明顯，我們如果要釋出，直接將資源放入到html目錄中。
6.2.2 部署
將我們之前打包的前端工程dist目錄下得內容複製到nginx的html目錄下，如下圖所示：
然後我們透過雙擊nginx下得nginx.exe檔案來啟動nginx，如下圖所示：
nginx伺服器的埠號是80，所以啟動成功之後，我們瀏覽器直接訪問http://localhost:80 即可，其中80埠可以省略，其瀏覽器展示效果如圖所示：
到此，我們的前端工程釋出成功。
PS: 如果80埠被佔用，我們需要透過conf/nginx.conf配置檔案來修改埠號。如下圖所示：
