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