?? 主頁：
?? 感謝各位大佬 點贊?? 收藏 留言?? 加關注!
?? 收錄于專欄：前端工程師

---

文章目錄

• 一、??什么是nginx？
• 二、??nginx 部署前端vue項目步驟
• • 2.1 ??安裝nginx
  • • 2.1.1 ??windows環境安裝
    • 2.1.2 ??linux環境安裝
  • 2.2 ??打包vue項目
  • 2.3 ??配置nginx

---

一、??什么是nginx？

Nginx是一款輕量級的HTTP服務器，采用事件驅動的異步非阻塞處理方式框架，這讓其具有極好的IO性能，時常用于服務端的反向代理和負載均衡。
優點：

• 支持海量高并發：采用IO多路復用epoll。官方測試Nginx能夠支持5萬并發鏈接，實際生產環境中可以支撐2-4萬并發連接數。
• 內存消耗少
• 可商業化
• 配置文件簡單 除了這些優點還有很多，比如反向代理功能，灰度發布，負載均衡功能等

二、??nginx 部署前端vue項目步驟

2.1 ??安裝nginx

2.1.1 ??windows環境安裝

到nginx官方下載系統相關的nginx版本安裝

啟動命令：

cd F:
ginx-1.19.4
start nginx

2.1.2 ??linux環境安裝

通常情況下很少使用windows來作為nginx的服務器，一般使用linux。對于linux安裝nginx有兩種方式，一種是使用官方已經編譯好的包來安裝，一種是使用源碼構建安裝。

第一種方式參考官方地址https://nginx.org/en/linux_packages.html#stable

第二種方式參考官方地址https://nginx.org/en/docs/install.html中的Building from Sources片段，這種實際上就是下一個tar.gz包仍到linux服務去自己編譯。

在linux服務上和window環境上使用nginx部署vue項目并沒有太大差異，把構建好的vue項目dist上傳到linux服務上，通用修改nginx服務器中的root來指向dist就ok了，然后使用

# centos 7
systemctl restart nginx.service
# centos 6
service nginx restart
# 或者是平滑重啟
service nginx reload

2.2 ??打包vue項目

執行命令

npm run build

2.3 ??配置nginx

修改nginx配置文件，配置文件為conf下的nginx.conf,修改nginx.conf中的server配置片段

server {listen       80;#默認端口是80，如果端口沒被占用可以不用修改server_name  localhost;root        E:/vue_project/my_project/dist;#vue項目的打包后的distlocation / {try_files $uri $uri/ @router;#需要指向下面的@router否則會出現vue的路由在nginx中刷新出現404index  index.html index.htm;}#對應上面的@router，主要原因是路由的路徑資源并不是一個真實的路徑，所以無法找到具體的文件#因此需要rewrite到index.html中，然后交給路由在處理請求資源location @router {rewrite ^.*$ /index.html last;}#.......其他部分省略}

完成nginx配置后重新加載配置文件

nginx -s reload

nginx -s reload
瀏覽器中訪問：http://localhost 測試是否部署成功