從一篇日記說起

我是一個小前端，我有寫日記的習(xí)慣

2020年10月17?天氣 晴

今天天氣不錯，心情也跟著好起來了

辛辛苦苦加班兩個星期終于完成了產(chǎn)品需求，到了要上線的時候了，嘴里也不知不覺哼起了“勞資今晚不加班”的小曲

一頓操作猛如虎，終端執(zhí)行?npm run build?一把梭，將構(gòu)建產(chǎn)出的 dist 文件夾扔給了發(fā)際線愈發(fā)上移的后端同學(xué)，讓其幫忙布署到服務(wù)器上

不一會，后端同學(xué)說項目布署好了，并扔回給了我一個線上鏈接

懷著激動的心，用顫抖的手慌忙點開，我沒有放過頁面上的每一個細(xì)節(jié)，畢竟都是用自己的頭發(fā)換回來的，頁面的上每一個按鈕我都要復(fù)點一次以確保它們沒有問題，幾分鐘后，我的臉上慢慢洋溢出來了笑容，因為我認(rèn)為這是一次完美的“線上行動”

趕緊平復(fù)了一下心情，在公司項目里 @BOSS，自豪的表示項目已完美上線，BOSS 們可以驗收

～ Wow! 平常高冷女神范的運營小姐姐給我發(fā)消息了，哈哈，一定是要夸我寫的這個系統(tǒng)太好用了吧，點開

趕緊自己試了試，只要一刷新還真是這樣，今天又得加班了!

完

為什么會出現(xiàn)404

我們先來看一下我們給到后端的dist文件

可以看到dist下只有一個?index.html?文件及一些靜態(tài)資源，這個是因為Vue是單頁應(yīng)用(SPA)，只有一個index.html作為入口文件，其它的路由都是通過JS來進(jìn)行跳轉(zhuǎn)

接著我們再來分析一下后端?nginx?的配置

server?{
??//?監(jiān)聽80端口
??listen?80;
??//?定義你的站點名稱
??server_name?website.com;
??//?根據(jù)請求?URI?設(shè)置配置
??location?/?{
??????//?站點根目錄，這里為?vue?構(gòu)建出來的?dist?目錄
??????root???/www/dist;
??????//?站點初始頁為index.html?或?index.htm
??????index??index.html?index.htm;
??}
}

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

關(guān)鍵在這里，當(dāng)我們在 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錯誤

單頁應(yīng)用(SPA)概念

我們前面有提到單頁應(yīng)用，那什么是單頁應(yīng)用呢？

單頁應(yīng)用

單頁應(yīng)用(single-page application)，縮寫SPA 是一種網(wǎng)絡(luò)應(yīng)用程序或網(wǎng)站的模型，它通過動態(tài)重寫當(dāng)前頁面來與用戶交互，而非傳統(tǒng)的從服務(wù)器重新加載整個新頁面。這種方法避免了頁面之間切換打斷用戶體驗，使應(yīng)用程序更像一個桌面應(yīng)用程序。在單頁應(yīng)用中，所有必要的代碼(HTML、JavaScript和CSS)都通過單個頁面的加載而檢索，或者根據(jù)需要(通常是為響應(yīng)用戶操作)動態(tài)裝載適當(dāng)?shù)馁Y源并添加到頁面。盡管可以用位置散列或HTML5歷史API來提供應(yīng)用程序中單獨邏輯頁面的感知和導(dǎo)航能力，但頁面在過程中的任何時間點都不會重新加載，也不會將控制轉(zhuǎn)移到其他頁面

大白話來講：

一個杯子，早上裝的牛奶，中午裝的是開水，晚上裝的是茶，我們可以發(fā)現(xiàn)，變的始終是內(nèi)容，而容器還是那個容器

當(dāng)然，每種技術(shù)都有其利弊，單頁應(yīng)用也是如此

利:

無刷新體驗，這個應(yīng)該是最顯著的有點，由于路由分發(fā)直接在瀏覽器端完成，頁面是不刷新，對用戶的響應(yīng)非常及時，因此提升了用戶體驗

完全的前端組件化，前端開發(fā)不再以頁面為單位，更多地采用組件化的思想，代碼結(jié)構(gòu)和組織方式更加規(guī)范化，便于修改和調(diào)整

弊:

首屏較長，要在一個頁面上為用戶提供產(chǎn)品的所有功能，在這個頁面加載的時候，首先要加載大量的靜態(tài)資源，這個加載時間相對比較長

不利于 SEO，單頁頁面，數(shù)據(jù)在前端渲染，就意味著沒有 SEO，或者需要使用變通的方案

Router的實現(xiàn)

為了讓大家加深大家對 Router 的理解，這里我們實現(xiàn)一個最簡潔的 Router

hash 模式

核心通過監(jiān)聽url中的hash來進(jìn)行路由跳轉(zhuǎn)

//?定義?Router
class?Router?{
????constructor?()?{
????????this.routes?=?{};?//?存放路由path及callback
????????this.currentUrl?=?'';
????????
????????//?監(jiān)聽路由change調(diào)用相對應(yīng)的路由回調(diào)
????????window.addEventListener('load',?this.refresh,?false);
????????window.addEventListener('hashchange',?this.refresh,?false);
????}
????
????route(path,?callback){
????????this.routes[path]?=?callback;
????}
????
????push(path)?{
????????this.routes[path]?&&?this.routes[path]()
????}
}

//?使用?router
window.miniRouter?=?new?Router();
miniRouter.route('/',?()?=>?console.log('page1'))
miniRouter.route('/page2',?()?=>?console.log('page2'))

miniRouter.push('/')?//?page1
miniRouter.push('/page2')?//?page2

history 模式

history 模式核心借用 HTML5 history api，api 提供了豐富的 router 相關(guān)屬性

先了解一個幾個相關(guān)的api

• history.pushState 瀏覽器歷史紀(jì)錄添加記錄
• history.replaceState 修改瀏覽器歷史紀(jì)錄中當(dāng)前紀(jì)錄
• history.popState 當(dāng) history 發(fā)生變化時觸發(fā)

//?定義?Router
class?Router?{
????constructor?()?{
????????this.routes?=?{};
????????this.listerPopState()
????}
????
????init(path)?{
????????history.replaceState({path:?path},?null,?path);
????????this.routes[path]?&&?this.routes[path]();
????}
????
????route(path,?callback){
????????this.routes[path]?=?callback;
????}
????
????push(path)?{
????????history.pushState({path:?path},?null,?path);
????????this.routes[path]?&&?this.routes[path]();
????}
????
????listerPopState?()?{
????????window.addEventListener('popstate'?,?e?=>?{
????????????const?path?=?e.state?&&?e.state.path;
????????????this.routers[path]?&&?this.routers[path]()
????????})
????}
}

//?使用?Router

window.miniRouter?=?new?Router();
miniRouter.route('/',?()=>?console.log('page1'))
miniRouter.route('/page2',?()=>?console.log('page2'))

//?跳轉(zhuǎn)
miniRouter.push('/page2')??//?page2

解決404

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

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

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

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

還是以 nginx 為例，更多版本的大家可以前往https://router.vuejs.org/zh/guide/essentials/history-mode.html 查看

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

這里有一個小細(xì)節(jié)，如果出現(xiàn)真的 404 頁面了呢？比如 website.com/notfound

因為這么做以后，你的服務(wù)器就不再返回 404 錯誤頁面，因為對于所有路徑都會返回 index.html 文件。為了避免這種情況，你應(yīng)該在 Vue 應(yīng)用里面覆蓋所有的路由情況，然后在給出一個 404 頁面

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

？？兩個豬頭是什么意思..能不能評論區(qū)告訴我..

包郵送書

今天為大家推薦一本新書《Vue.js入門與商城開發(fā)實戰(zhàn)》，免費包郵送給大家

簡單介紹一下

本書主要面向Vue.js的初級入門者，涵蓋詳細(xì)的理論知識、布局分析和邏輯分析，還有豐富的實戰(zhàn)案例、詳細(xì)的代碼解說，具有很強的實用性。

全書主要內(nèi)容分三部分：基礎(chǔ)知識、技能提升、商城開發(fā)案例。

• 基礎(chǔ)知識部分包括Vue.js入門、數(shù)據(jù)綁定、表單和雙向數(shù)據(jù)綁定、條件和循環(huán)指令、樣式綁定、事件處理器、監(jiān)聽和計算屬性。

• 技能提升部分包括Vue.js的組件，自定義指令和響應(yīng)接口，路由、動畫和過渡，Vue.js中的插件Axios等。

• 商城開發(fā)案例部分包括一個商城項目的大部分功能，如首頁開發(fā)、用戶管理、實現(xiàn)產(chǎn)品和新聞頁面、購物和訂單處理等

更多信息大家可以點擊下方小程序查看

這次準(zhǔn)備了多種方式抽獎，「集贊、走心、在看」這三種方式都可以參與！感謝親愛的讀者們，你們的支持也是我持續(xù)更文最大的動力。

為了避免中獎后失聯(lián)，請務(wù)必添加小萌貓微信:

留言抽獎 (5+5)

• 大獎: 留言點贊數(shù)「第1,2,3名」可獲得一本 《Vue.js入門與商城開發(fā)實戰(zhàn)》
• 走心獎: 留言「2名」可獲得一本 《Vue.js入門與商城開發(fā)實戰(zhàn)》
• 參與獎: 隨機抽取「5位」優(yōu)質(zhì)評論送出「10.24元」紅包

再看抽獎 (3+5)

ps: 記得先添加小萌貓微信，不然看不到哪些小伙伴點在看

• 大獎: 隨機抽取「3位」可獲得一本 《Vue.js入門與商城開發(fā)實戰(zhàn)》
• 次獎: 隨機抽取「5位」優(yōu)質(zhì)評論送出「10.24元」紅包

- END -近期不要再問我跨域的問題了 | 原理剖析Webpack 5 發(fā)布，Chrome 86 支持本地文件系統(tǒng)若此文有用，何不素質(zhì)三連??

總結(jié)

以上是生活随笔為你收集整理的element tree不刷新视图_Vue项目布署后，刷新页面404的真正原因找到了的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。