Vue服務(wù)器部署刷新頁面404

問題描述

在上線vue開發(fā)的前端網(wǎng)頁部署在服務(wù)器上后，刷新頁面顯示404

原因

因為網(wǎng)頁上顯示的是靜態(tài)絕對路徑

而實(shí)際上服務(wù)器上是沒有改路徑的，多以導(dǎo)致刷新匯報錯誤

解決方法

1. 在Vue框架中解決404

vue router mode 默認(rèn)為hsas，這樣的url中會帶有#，如果改成mode:'history'就能去掉#號，也可以正常訪問，但是再次率先你頁面就會出現(xiàn)404

const router = new Router({
mode: 'history'
});

將url中的#去掉，讓人很不爽

2. 修改nginx配置文件

將以下代碼放入nginx中

location / {
?? ?……
?? ?try_files $uri $uri/ /index.html; ---解決頁面刷新404問題
}　

保存并退出

• ../nginx -t -- 驗證nginx配置文件是否正確
• ../nginx -s reload -- 重啟nginx

如果采用寶塔面板進(jìn)行部署，則修改nginx相關(guān)配置即可 

vue項目刷新界面出現(xiàn)404,正常點(diǎn)擊跳轉(zhuǎn)沒問題

這個原因的本質(zhì)是 history 和 hash 的區(qū)別

以 www.louhc.com/jichu/123 為例子（123為變量）

1. 直觀上的區(qū)別是：

• hash模式下，在瀏覽器地址欄里面會有: www.louhc.com/#/jichu/123 這種帶 # 號的情況,視覺上不太美觀。
• history模式下,地址欄為:www.louhc.com/jichu/123 不會出現(xiàn)帶#的情況 。

2. 致命區(qū)別

hash模式下，上線之后不會出現(xiàn)問題。

history 模式下，會出現(xiàn)一個致命的BUG，在服務(wù)器上面上線之后，點(diǎn)擊頁面跳轉(zhuǎn)沒有問題，但是一旦點(diǎn)擊刷新頁面會出現(xiàn)404錯誤,原因是history模式下刷新界面，就等同于向服務(wù)器直接請求:

www.louhc.com/jichu/123。但是在服務(wù)器后端的路徑配置中壓根就沒有 /jichu/123 ，所以后端匹配不到相應(yīng)的值，就會返回404錯誤,。有的朋友就會有疑慮，為什么在vue項目開發(fā)的時候不會出現(xiàn)這種問題呢？因為在vue項目開發(fā)的時候是訪問自己的8080服務(wù)器,后端有進(jìn)行處理，在刷新界面后找不到相對路徑時，會重新渲染index.html界面，把路由的控制權(quán)交給前端，然后前端負(fù)責(zé)路由的匹配，在找到符合/jichu /123 這種格式的路由后,就會匹配成功。從而達(dá)到頁面正常顯示的情況.。

所以在線上遇到這種情況下，我們需要后端進(jìn)行相應(yīng)的配置處理，在匹配不到路徑的情況下重新渲染index.html 文件。

以下是后端如何匹配的例子:

Apache

<IfModule mod_rewrite.c>
? RewriteEngine On
? RewriteBase /
? RewriteRule ^index\.html$ - [L]
? RewriteCond %{REQUEST_FILENAME} !-f
? RewriteCond %{REQUEST_FILENAME} !-d
? RewriteRule . /index.html [L]
</IfModule>

相反mod_rewrite，您也可以使用。FallbackResource

Nginx

location / {
? try_files $uri $uri/ /index.html;
}

本機(jī)Node.js

const http = require('http')
const fs = require('fs')
const httpPort = 80
?
http.createServer((req, res) => {
? fs.readFile('index.htm', 'utf-8', (err, content) => {
? ? if (err) {
? ? ? console.log('We cannot open "index.htm" file.')
? ? }
?
? ? res.writeHead(200, {
? ? ? 'Content-Type': 'text/html; charset=utf-8'
? ? })
?
? ? res.end(content)
? })
}).listen(httpPort, () => {
? console.log('Server listening on: http://localhost:%s', httpPort)
})

通過Node.js進(jìn)行表達(dá)

對于Node.js / Express，請考慮使用connect-history-api-fallback中間件

Internet信息服務(wù)（IIS）

安裝IIS UrlRewrite

使用以下web.config命令在網(wǎng)站的根目錄中創(chuàng)建一個文件：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
? <system.webServer>
? ? <rewrite>
? ? ? <rules>
? ? ? ? <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
? ? ? ? ? <match url="(.*)" />
? ? ? ? ? <conditions logicalGrouping="MatchAll">
? ? ? ? ? ? <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
? ? ? ? ? ? <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
? ? ? ? ? </conditions>
? ? ? ? ? <action type="Rewrite" url="/" />
? ? ? ? </rule>
? ? ? </rules>
? ? </rewrite>
? </system.webServer>
</configuration>

Caddy

rewrite {
? ? regexp .*
? ? to {path} /
}

Firebase托管

將此添加到您的firebase.json：

{
? "hosting": {
? ? "public": "dist",
? ? "rewrites": [
? ? ? {
? ? ? ? "source": "**",
? ? ? ? "destination": "/index.html"
? ? ? }
? ? ]
? }
}

警告

需要注意的是：您的服務(wù)器將不再報告404錯誤，因為所有未找到的路徑現(xiàn)在都可以處理您的index.html文件。要解決此問題，您應(yīng)該在Vue應(yīng)用程序中實(shí)施一個包羅萬象的路由以顯示404頁面：

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

或者，如果您使用的是Node.js服務(wù)器，則可以通過使用服務(wù)器端的路由器來匹配輸入URL來實(shí)現(xiàn)后備，如果沒有路由匹配，則以404進(jìn)行響應(yīng)。查看Vue服務(wù)器端渲染文檔以獲取更多信息。 

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論