nginx部署vue專案

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

打包vue專案

通過npm run build命令打包好的靜態資源將輸出到dist目錄中。

啟動 並檢視nginx任務程序(ps 在nginx根目錄下)

start nginx

tasklist /fi "imagename eq nginx.exe"

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

server localhost:8686 max_fails=1 fail_timeout=30s;

}server

#對應上面的@router，主要原因是路由的路徑資源並不是乙個真實的路徑，所以無法找到具體的檔案

#因此需要rewrite到index.html中，然後交給路由在處理請求資源

location @router

location /api/chacker/

}#.......其他部分省略

} 完成後，就可以在瀏覽器訪問了 http://localhost:8888

2. linux版 安裝nginx

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

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

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

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構建。npm run build通過上面命令後打包好的靜態資源將輸出到dist目錄中。如圖所示 安裝ngi...

nginx專案部署vue專案

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