一、如何部署
前后端分離開發模式下，前后端是獨立布署的，前端只需要將最后的構建物上傳至目標服務器的web容器指定的靜態目錄下即可
我們知道vue項目在構建后，是生成一系列的靜態常規布署我們只需要將這個目錄上傳至目標服務器即可
// scp 上傳 user為主機登錄用戶，host為主機外網ip, xx為web容器靜態資源路徑 scp dist.zip user@host:/xx/xx/xx
讓web容器跑起來，以nginx為例
server { listen 80; server_name www.xxx.com; location / { index /data/dist/index.html; } }
配置完成記得重啟nginx
// 檢查配置是否正確 nginx -t // 平滑重啟 nginx -s reload
操作完后就可以在瀏覽器輸入域名進行訪問了
當然上面只是提到最簡單也是最直接的一種布署方式
什么自動化，鏡像，容器，流水線布署，本質也是將這套邏輯抽象，隔離，用程序來代替重復性的勞動，本文不展開
二、404問題
這是一個經典的問題，相信很多同學都有遇到過，那么你知道其真正的原因嗎？
我們先還原一下場景：
vue項目在本地時運行正常，但部署到服務器中，刷新頁面，出現了404錯誤
先定位一下，HTTP 404 錯誤意味着鏈接指向的資源不存在
問題在於為什么不存在？且為什么只有history模式下會出現這個問題？
為什么history模式下有問題
Vue是屬於單頁應用（single-page application）
而SPA是一種網絡應用程序或網站的模型，所有用戶交互是通過動態重寫當前頁面，前面我們也看到了，不管我們應用有多少頁面，構建物都只會產出一個index.html
現在，我們回頭來看一下我們的nginx配置
server { listen 80; server_name www.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 { listen 80; server_name www.xxx.com; location / { index /data/dist/index.html; try_files $uri $uri/ /index.html; } }
修改完配置文件后記得配置的更新
nginx -s reload
這么做以后，你的服務器就不再返回 404 錯誤頁面，因為對於所有路徑都會返回 index.html 文件
為了避免這種情況，你應該在 Vue 應用里面覆蓋所有的路由情況，然后在給出一個 404 頁面
const router = new VueRouter({ mode: 'history', routes: [ { path: '*', component: NotFoundComponent } ] })
關於后端配置方案還有：Apache、nodejs等，思想是一致的，這里就不展開述說了
參考文獻
- https://juejin.cn/post/6844903872637632525
- https://vue-js.com/topic/5f8cf91d96b2cb0032c385c0