element tree不刷新视图_Vue项目布署后,刷新页面404的真正原因找到了
從一篇日記說起
我是一個小前端,我有寫日記的習(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)
//?定義?Routerclass?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ā)
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元」紅包
總結(jié)
以上是生活随笔為你收集整理的element tree不刷新视图_Vue项目布署后,刷新页面404的真正原因找到了的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java报错symbol_为何此处会出现
- 下一篇: 区分错误类型_数仓|几种SQL隐藏的错误