這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一、如何部署 前後端分離開發模式下，前後端是獨立佈署的，前端只需要將最後的構建物上傳至目標伺服器的web容器指定的靜態目錄下即可 我們知道vue項目在構建後，是生成一系列的靜態文件 常規佈署我們只需要將這個目錄上傳至目標伺服器即可 // ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
一、如何部署
前後端分離開發模式下，前後端是獨立佈署的，前端只需要將最後的構建物上傳至目標伺服器的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
