一、如何部署

前後端分離開發模式下，前後端是獨立佈署的，前端只需要將最後的構建物上傳至目標伺服器的web容器指定的靜態目錄下即可

我們知道vue專案在構建後，是生成一系列的靜態檔案

常規佈署我們只需要將這個目錄上傳至目標伺服器即可

//scp上傳user為主機登入使用者，host為主機外網ip,xx為web容器靜態資源路徑
scpdist.zipuser@host:/xx/xx/xx

讓web容器跑起來，以nginx為例

server{
listen80;
server_namewww.xxx.com;

location/{
index/data/dist/index.html;
}
}

配置完成記得重啟nginx

//檢查配置是否正確
nginx-t

//平滑重啟
nginx-sreload

操作完後就可以在瀏覽器輸入域名進行訪問了

當然上面只是提到最簡單也是最直接的一種佈署方式

什麼自動化，映象，容器，流水線佈署，本質也是將這套邏輯抽象，隔離，用程式來代替重複性的勞動，本文不展開

二、404問題

這是一個經典的問題，相信很多同學都有遇到過，那麼你知道其真正的原因嗎？

我們先還原一下場景：

• vue專案在本地時執行正常，但部署到伺服器中，重新整理頁面，出現了404錯誤

先定位一下，HTTP 404 錯誤意味著連結指向的資源不存在

問題在於為什麼不存在？且為什麼只有history模式下會出現這個問題？

為什麼history模式下有問題

Vue是屬於單頁應用（single-page application）

而SPA是一種網路應用程式或網站的模型，所有使用者互動是通過動態重寫當前頁面，前面我們也看到了，不管我們應用有多少頁面，構建物都只會產出一個index.html

現在，我們回頭來看一下我們的nginx配置

server{
listen80;
server_namewww.xxx.com;

location/{
index/data/dist/index.html;
}
}

可以根據nginx配置得出，當我們在位址列輸入www.xxx.com時，這時會開啟我們dist目錄下的index.html檔案，然後我們在跳轉路由進入到www.xxx.com/login

關鍵在這裡，當我們在website.com/login頁執行重新整理操作，nginx location是沒有相關配置的，所以就會出現 404 的情況

為什麼hash模式下沒有問題

router hash模式我們都知道是用符號#表示的，如 website.com/#/login,hash的值為#/login

它的特點在於：hash雖然出現在URL中，但不會被包括在HTTP請求中，對服務端完全沒有影響，因此改變hash不會重新載入頁面

hash模式下，僅hash符號之前的內容會被包含在請求中，如website.com/#/login只有website.com會被包含在請求中 ，因此對於服務端來說，即使沒有配置location，也不會返回404錯誤

解決方案

看到這裡我相信大部分同學都能想到怎麼解決問題了，

產生問題的本質是因為我們的路由是通過JS來執行檢視切換的，

當我們進入到子路由時重新整理頁面，web容器沒有相對應的頁面此時會出現404

所以我們只需要配置將任意頁面都重定向到index.html，把路由交由前端處理

對nginx配置檔案.conf修改，新增try_files $uri $uri/ /index.html;

server{
listen80;
server_namewww.xxx.com;

location/{
index/data/dist/index.html;
try_files$uri$uri//index.html;
}
}

修改完配置檔案後記得配置的更新

nginx-sreload

這麼做以後，你的伺服器就不再返回 404 錯誤頁面，因為對於所有路徑都會返回index.html檔案

為了避免這種情況，你應該在Vue應用裡面覆蓋所有的路由情況，然後在給出一個 404 頁面

constrouter=newVueRouter({
mode:'history',
routes:[
{path:'*',component:NotFoundComponent}
]
})

關於後端配置方案還有：Apache、nodejs等，思想是一致的，這裡就不展開述說了