我們的前端工程開發好了，但是我們需要發布，那么如何發布呢？主要分為2步：

1.前端工程打包

2.通過nginx服務器發布前端工程

前端工程打包

接下來我們先來對前端工程進行打包

我們直接通過VS Code的NPM腳本中提供的build按鈕來完成，如下圖所示，直接點擊即可：

然后會在工程目錄下生成一個dist目錄，用于存放需求發布的前端資源，如下圖所示：

部署前端工程

nginx介紹

nginx：Nginx是一款輕量級的Web服務器/反向代理服務器及電子郵件（IMAP/POP3）代理服務器。其特點是占有內存少，并發能力強，在各大型互聯網公司都有非常廣泛的應用。

nginx在windows中的安裝是比較方便的，直接解壓即可。所以我們直接將nginx-1.22.0.zip壓縮文件拷貝到無中文的目錄下，直接解壓即可，如下圖所示就是nginx的解壓目錄以及目錄結構說明：

很明顯，我們如果要發布，直接將資源放入到html目錄中。

部署

將我們之前打包的前端工程dist目錄下得內容拷貝到nginx的html目錄下，如下圖所示：

然后我們通過雙擊nginx下得nginx.exe文件來啟動nginx，如下圖所示：

nginx服務器的端口號是80，所以啟動成功之后，我們瀏覽器直接訪問http://localhost:80即可，其中80端口可以省略，其瀏覽器展示效果如圖所示：

到此，我們的前端工程發布成功。

PS：如果80端口被占用，我們需要通過conf/nginx.conf配置文件來修改端口號。如下圖所示：