nginx部署vue專案

nginx是乙個高效能的http和反向**伺服器。因此常用來做靜態資源伺服器和後端的反向**伺服器。本文主要記錄使用nginx去部署使用vue搭建的前端專案，專案基於vue官方的腳手架vue-cli構建。

npm run build

安裝nginx

啟動命令：

cd d:\programfiles\nginx-1.12.2\nginx-1.12.2start nginx

tasklist /fi "imagename eq nginx.exe"

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

server 

#對應上面的@router，主要原因是路由的路徑資源並不是乙個真實的路徑，所以無法找到具體的檔案
#因此需要rewrite到index.html中，然後交給路由在處理請求資源
location @router 
#.......其他部分省略
}

nginx -s reload

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

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

第一種方式參考官方位址

第二種方式參考官方位址中的building from sources片段，這種實際上就是下乙個tar.gz包仍到linux服務去自己編譯。

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

# centos 7systemctl restart nginx.service

# centos 6service nginx restart

service nginx reload

Nginx部署Vue專案

npm run build生成乙個dist資料夾。將dist目錄整個複製到nginx根目錄的html資料夾下。編輯conf目錄下的nginx.conf檔案 server 因為路由的路徑資源並不是乙個真實的路徑，所以無法找到具體的檔案 因此需要rewrite到index.html，然後交給路由再處理資...

nginx部署vue專案

nginx是乙個高效能的http和反向 伺服器。因此常用來做靜態資源伺服器和後端的反向 伺服器。本文主要記錄使用nginx去部署使用vue搭建的前端專案，專案基於vue官方的腳手架vue cli構建。打包vue專案 通過npm run build命令打包好的靜態資源將輸出到dist目錄中。1.win...

nginx專案部署vue專案

一 nginx配置 server 介面api 在配置檔案vue.config.js的devserver的應該為 api location api 其他部分省略 說明 二.專案配置檔案 require path module.exports pathrewrite 如果不寫則只能修改 的網域名稱，如果...