Vue cli專案部署到Nginx

2022-03-12 16:36:09 字數 1794 閱讀 9665

專案環境:

nginx常用命令如下:

nginx -h		# 開啟幫助

nginx -t # 檢查配置檔案是否正確

# 以下命令均要先啟動nginx才能執行

nginx -s stop # 停止

nginx -s quit # 退出

nginx -s reopen # 重新啟動(注意不會重新讀取配置檔案)

nginx -s reload # 重新讀取配置檔案

對於vue-cli建立的專案,修改vue.config.js檔案(位於專案根目錄下,沒有的話自行建立):

module.exports = ,

// 取消生成map檔案(map檔案可以準確的輸出是哪一行哪一列有錯)

productionsourcemap: false,

// 開發環境和部署環境的路徑

publicpath: process.env.node_env === 'production'

? '/'

: '/my/',

configurewebpack: (config) =>

})// 在命令列使用 vue inspect > o.js 可以檢查修改後的webpack配置檔案

}}

修改nginx目錄中的conf/nginx.conf檔案,在 http -> server 節點中,修改location節的內容:

location /
在nginx根目錄使用命令nginx -s reload即可在瀏覽器中通過http://localhost訪問專案。

有時乙個nginx中放了好幾個子專案,需要將不同的專案通過不同的路徑來訪問。

對於專案1而言,修改vue.config.js檔案的publicpath

publicpath: '/vue1/'
對於專案2而言,修改vue.config.js檔案的publicpath

publicpath: '/vue2/'
修改nginx目錄中的conf/nginx.conf檔案,在 http -> server 節點中,修改location節的內容:

location /vue1 

location /vue2

在nginx根目錄使用命令nginx -s reload即可在瀏覽器中通過http://localhost/vue1http://localhost/vue2訪問專案1、專案2。

當前後端專案分別部署在同一臺機器上時,由於無法使用相同的埠,故後端一般會將埠號設定成不同的值(例如8080),但是當前端向後端請求資源時還要加上埠號,未免顯得麻煩,故利用可以nginx將前端的指定路徑**到後端的8080埠上。

conf/nginx.conf檔案中增加location

location /api
這樣,當前端訪問/api路徑時,實際上訪問的是http://localhost:8080/api路徑。

vue cli專案部署到Gitee Page

為什麼不選擇github page?原因很簡單,因為gitee不用fq速度快!這步比較簡單,就不做演示了 由於使用vue cli3建立的專案隱藏了webpack的配置,所以需要該檔案來修改部分的webpack配置。檔案內容如下 vue.config.js module.exports vue div...

專案部署到Tomcat

classes資料夾拷貝到web inf資料夾根目錄下 classes資料夾包括 包.類檔案,配置檔案 lib資料夾拷貝到web inf資料夾根目錄下,用圖說話吧 1.訪問路徑是指部署在伺服器中 的訪問路徑 2.靜態資源 html img css 等的訪問路徑就是它儲存的位置 3.動態資源 serv...

專案部署到Tomcat報錯

1 今天晚上,我想把dojo專案部署到tomcat中,結果發現部署不了,tomcat報錯。而且,這個錯誤白天時也碰到了。錯誤具體詳細如下 截圖如下 2 錯誤原因 由於之前部署了乙個專案到tomcat中,後來換了乙個專案部署,原來專案的web inf沒有刪除,導致出現這種錯誤 刪除了votesyste...