快捷導(dǎo)航

部署Vue項(xiàng)目到服務(wù)器后404錯(cuò)誤的原因及解決方案

更新時(shí)間：2025年02月21日 10:56:16 作者：全棧若城

文章介紹了Vue項(xiàng)目部署步驟以及404錯(cuò)誤的解決方案,部署步驟包括構(gòu)建項(xiàng)目、上傳文件、配置Web服務(wù)器、重啟Nginx和訪問(wèn)域名,404錯(cuò)誤通常是由于歷史模式問(wèn)題導(dǎo)致的,解決方法是修改Nginx配置,將所有頁(yè)面請(qǐng)求重定向到index.html,并在Vue應(yīng)用中覆蓋所有路由情況

一、Vue項(xiàng)目部署步驟

在前后端分離的開(kāi)發(fā)模式下，前端項(xiàng)目獨(dú)立部署通常涉及以下步驟：

構(gòu)建項(xiàng)目：Vue項(xiàng)目構(gòu)建后生成一系列靜態(tài)文件。
上傳文件：使用scp命令將構(gòu)建好的文件上傳至服務(wù)器的web容器指定靜態(tài)目錄。

scp dist.zip user@host:/xx/xx/xx

配置Web服務(wù)器：以Nginx為例，配置服務(wù)器以指向靜態(tài)文件目錄。

server {
  listen 80;
  server_name www.xxx.com;
  location / {
    index /data/dist/index.html;
  }
}

重啟Nginx：檢查配置并重啟Nginx以應(yīng)用更改。

nginx -t
nginx -s reload

訪問(wèn)域名：在瀏覽器輸入域名以訪問(wèn)部署的應(yīng)用。
以上是最直接的一種部署方式。更高級(jí)的部署方式，如自動(dòng)化、鏡像、容器和流水線部署，本質(zhì)上是將此邏輯抽象和程序化，本文不展開(kāi)討論。

二、404錯(cuò)誤原因及解決方案

錯(cuò)誤場(chǎng)景

問(wèn)題描述：Vue項(xiàng)目在本地運(yùn)行正常，但部署到服務(wù)器后刷新頁(yè)面出現(xiàn)404錯(cuò)誤。
錯(cuò)誤定位：HTTP 404錯(cuò)誤表示請(qǐng)求的資源不存在。

原因分析

History模式問(wèn)題：在Vue單頁(yè)應(yīng)用（SPA）中，所有用戶(hù)交互通過(guò)動(dòng)態(tài)重寫(xiě)當(dāng)前頁(yè)面實(shí)現(xiàn)。構(gòu)建物只產(chǎn)出index.html，而nginx配置可能未涵蓋所有路由。
Hash模式無(wú)問(wèn)題：Hash模式不會(huì)將hash值包含在HTTP請(qǐng)求中，因此不會(huì)因hash變化重新加載頁(yè)面，避免了404錯(cuò)誤。

解決方案

修改Nginx配置：配置所有頁(yè)面請(qǐng)求都重定向到index.html，交由前端路由處理。

server {
  listen 80;
  server_name www.xxx.com;
  location / {
    index /data/dist/index.html;
    try_files $uri $uri/ /index.html;
  }
}

修改后重啟Nginx。

nginx -s reload

覆蓋所有路由：在Vue應(yīng)用中覆蓋所有路由情況，并提供404頁(yè)面。

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

其他后端配置方案（如Apache、Node.js）的核心思想類(lèi)似，本文不再詳述。

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

您可能感興趣的文章: