nginx部署vue項目

nginx是一個高性能的HTTP和反向代理服務器。因此常用來做靜態資源服務器和后端的反向代理服務器。本文主要記錄使用nginx去部署使用vue搭建的前端項目，項目基於vue官方的腳手架vue-cli構建。

打包vue項目

npm run build

通過上面命令后打包好的靜態資源將輸出到dist目錄中。如圖所示

 

 安裝nginx

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

windows環境

下載相應的windows版本解壓，解壓后如圖所示

 

 啟動命令：

cd D:\ProgramFiles\nginx-1.12.2\nginx-1.12.2
start nginx

查看nginx任務進程(ps:需要在安裝的根路徑下執行)

tasklist /fi "imagename eq nginx.exe"

如圖所示

 

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

 server {
        listen       8888;#默認端口是80，如果端口沒被占用可以不用修改
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root        E:/vue/my_project/dist;#vue項目的打包后的dist

        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否則會出現vue的路由在nginx中刷新出現404
            index  index.html index.htm;
        }
        #對應上面的@router，主要原因是路由的路徑資源並不是一個真實的路徑，所以無法找到具體的文件
        #因此需要rewrite到index.html中，然后交給路由在處理請求資源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #.......其他部分省略
  }

完成nginx配置后重新加載配置文件，命令如下（ps:需要在安裝的根路徑下執行）：

nginx -s reload

瀏覽器中訪問：http://localhost:8888

通常情況下ngxin是安裝到單獨的服務器上，因此一般是把vue打包后的dist仍到服務上的具體位置，然后修改nginx.conf的root路徑來指向我們的dist。

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