快捷導(dǎo)航

vue項(xiàng)目本地開(kāi)發(fā)完成后部署到服務(wù)器后報(bào)404錯(cuò)誤解決方案

更新時(shí)間：2024年01月22日 08:51:48 作者：C+?安口木

很多時(shí)候我們發(fā)現(xiàn)辛辛苦苦寫(xiě)的VueJs應(yīng)用經(jīng)過(guò)打包后在自己本地搭建的服務(wù)器上測(cè)試沒(méi)有什么問(wèn)題,但真正放在服務(wù)器上后會(huì)發(fā)現(xiàn)或多或少的問(wèn)題,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目本地開(kāi)發(fā)完成后部署到服務(wù)器后報(bào)404錯(cuò)誤的解決方案,需要的朋友可以參考下

一、如何部署

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

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

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

// scp 上傳 user為主機(jī)登錄用戶，host為主機(jī)外網(wǎng)ip, xx為web容器靜態(tài)資源路徑
scp dist.zip user@host:/xx/xx/xx

讓web容器跑起來(lái)，以nginx為例

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

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

配置完成記得重啟nginx

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

// 平滑重啟
nginx -s reload

操作完后就可以在瀏覽器輸入域名進(jìn)行訪問(wèn)了

當(dāng)然上面只是提到最簡(jiǎn)單也是最直接的一種布署方式

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

二、404問(wèn)題

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

我們先還原一下場(chǎng)景：

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

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

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

為什么history模式下有問(wèn)題

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

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

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

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

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

可以根據(jù) nginx 配置得出，當(dāng)我們?cè)诘刂窓谳斎?nbsp;www.xxx.com 時(shí)，這時(shí)會(huì)打開(kāi)我們 dist 目錄下的 index.html 文件，然后我們?cè)谔D(zhuǎn)路由進(jìn)入到 www.xxx.com/login

關(guān)鍵在這里，當(dāng)我們?cè)?nbsp;website.com/login 頁(yè)執(zhí)行刷新操作，nginx location 是沒(méi)有相關(guān)配置的，所以就會(huì)出現(xiàn) 404 的情況

為什么hash模式下沒(méi)有問(wèn)題

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

它的特點(diǎn)在于：hash 雖然出現(xiàn)在 URL 中，但不會(huì)被包括在 HTTP 請(qǐng)求中，對(duì)服務(wù)端完全沒(méi)有影響，因此改變 hash 不會(huì)重新加載頁(yè)面

hash 模式下，僅 hash 符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求中，如 website.com/#/login 只有 website.com 會(huì)被包含在請(qǐng)求中，因此對(duì)于服務(wù)端來(lái)說(shuō)，即使沒(méi)有配置location，也不會(huì)返回404錯(cuò)誤

解決方案

看到這里我相信大部分同學(xué)都能想到怎么解決問(wèn)題了，

產(chǎn)生問(wèn)題的本質(zhì)是因?yàn)槲覀兊穆酚墒峭ㄟ^(guò)JS來(lái)執(zhí)行視圖切換的，

當(dāng)我們進(jìn)入到子路由時(shí)刷新頁(yè)面，web容器沒(méi)有相對(duì)應(yīng)的頁(yè)面此時(shí)會(huì)出現(xiàn)404

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

對(duì)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 錯(cuò)誤頁(yè)面，因?yàn)閷?duì)于所有路徑都會(huì)返回 index.html 文件

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

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

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

參考文獻(xiàn)

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

總結(jié)

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

您可能感興趣的文章: