vue項目 使用nginx代理

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

打包vue項目

npm run build

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

 

如圖所示

修改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。