一、如何部署

前后端分離開發(fā)模式下，前后端是獨立布署的，前端只需要將最后的構(gòu)建物上傳至目標服務(wù)器的web容器指定的靜態(tài)目錄下即可

我們知道vue項目在構(gòu)建后，是生成一系列的靜態(tài)文件

常規(guī)布署我們只需要將這個目錄上傳至目標服務(wù)器即可

// scp 上傳 user為主機登錄用戶，host為主機外網(wǎng)ip, xx為web容器靜態(tài)資源路徑
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

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

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

什么自動化，鏡像，容器，流水線布署，本質(zhì)也是將這套邏輯抽象，隔離，用程序來代替重復性的勞動，本文不展開

二、404問題

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

我們先還原一下場景：

• vue項目在本地時運行正常，但部署到服務(wù)器中，刷新頁面，出現(xiàn)了404錯誤

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

問題在于為什么不存在？且為什么只有history模式下會出現(xiàn)這個問題？

為什么history模式下有問題

Vue是屬于單頁應(yīng)用（single-page application）

而SPA是一種網(wǎng)絡(luò)應(yīng)用程序或網(wǎng)站的模型，所有用戶交互是通過動態(tài)重寫當前頁面，前面我們也看到了，不管我們應(yīng)用有多少頁面，構(gòu)建物都只會產(chǎn)出一個index.html

現(xiàn)在，我們回頭來看一下我們的nginx配置

server {
  listen  80;
  server_name  www.xxx.com;

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

可以根據(jù) nginx 配置得出，當我們在地址欄輸入 www.xxx.com 時，這時會打開我們 dist 目錄下的 index.html 文件，然后我們在跳轉(zhuǎn)路由進入到 www.xxx.com/login

關(guān)鍵在這里，當我們在 website.com/login 頁執(zhí)行刷新操作，nginx location 是沒有相關(guān)配置的，所以就會出現(xiàn) 404 的情況

為什么hash模式下沒有問題

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

它的特點在于：hash 雖然出現(xiàn)在 URL 中，但不會被包括在 HTTP 請求中，對服務(wù)端完全沒有影響，因此改變 hash 不會重新加載頁面

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

解決方案

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

產(chǎn)生問題的本質(zhì)是因為我們的路由是通過JS來執(zhí)行視圖切換的，

當我們進入到子路由時刷新頁面，web容器沒有相對應(yīng)的頁面此時會出現(xiàn)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

這么做以后，你的服務(wù)器就不再返回 404 錯誤頁面，因為對于所有路徑都會返回 index.html 文件

為了避免這種情況，你應(yīng)該在 Vue 應(yīng)用里面覆蓋所有的路由情況，然后在給出一個 404 頁面

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

關(guān)于后端配置方案還有：Apache、nodejs等，思想是一致的，這里就不展開述說了

參考文獻

• https://juejin.cn/post/6844903872637632525
• https://vue-js.com/topic/5f8cf91d96b2cb0032c385c0

總結(jié) 

到此這篇關(guān)于vue項目本地開發(fā)完成后部署到服務(wù)器后報404錯誤解決方案的文章就介紹到這了,更多相關(guān)vue部署到服務(wù)器報404內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論