淺談vue項(xiàng)目4rs vue-router上線后history模式遇到的坑
此次項(xiàng)目開發(fā)完后準(zhǔn)備打包，因?yàn)閔ash模式的路徑帶#看著實(shí)在是有點(diǎn)丑，所以采用history模式。因?yàn)楸敬雾?xiàng)目屬于以前網(wǎng)站重構(gòu)，但是seo問題，所以需要以前的一些地址路徑寫，所以vue-router的路徑全部重改了。打包后查了網(wǎng)上一大堆，都說要把config里的index.js 里的build里的
assetsPublicPath: '/'改成‘./'，打包上線發(fā)現(xiàn)在hash模式下是沒問題的，
但一旦改成history模式，有些動(dòng)態(tài)js文件的路徑都是錯(cuò)的。無奈之下死馬當(dāng)活馬醫(yī)，把‘./'改回了‘/'在history模式
下再次打包上線，發(fā)現(xiàn)點(diǎn)擊跳轉(zhuǎn)頁面都是正常的，有些小激動(dòng)。但是history模式的通病就是不能刷新，
因?yàn)樵瓉硖D(zhuǎn)時(shí)其實(shí)不是通過請求服務(wù)器的，而是通過js操作history的API改變地址完成的。
當(dāng)你刷新了之后瀏覽器就耿直的去請求服務(wù)器了，然而服務(wù)器沒有這個(gè)路由，于是就404了。
解決方法1：可以做個(gè)代理，讓所有訪問服務(wù)器的地址都返回同一個(gè)入口文件。（推薦使用）
解決方法2：采用靜態(tài)文件的形式讓每個(gè)目錄都存在就不會(huì)報(bào)錯(cuò)了
我們服務(wù)器是采用nginx，我不會(huì)，沒弄，就自己用了nodejs和express搭建了個(gè)簡單服務(wù)器，并采用了官方推薦的中間件
connect-history-api-fallback
使用方法：
在服務(wù)器app.js文件里引入
var history = require('connect-history-api-fallback');
然后在app綁定路由之前綁定中間件，
app.use(history({
rewrites: [
{ from: /^\/wap\/.*$/, to: '/index.html' }//這個(gè)是正確方式
]}));
我一開始
app.use(history({
rewrites: [
{ from: /^\/wap\/.*$/, to: '/' }
]
}));
這樣的，發(fā)現(xiàn)刷新是正常的，但是路徑后面總是多了個(gè)"/",看著很是奇怪,就試著改成當(dāng)前下的html文件，發(fā)現(xiàn)真的可以。從此大功告成。
以上這篇淺談vue項(xiàng)目4rs vue-router上線后history模式遇到的坑就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3的介紹和兩種創(chuàng)建方式詳解(cli和vite)
這篇文章主要介紹了vue3的介紹和兩種創(chuàng)建方式(cli和vite),vue3對比vue2帶來的性能提升有很多優(yōu)勢，總體來說Vue 3在性能、開發(fā)體驗(yàn)和代碼組織方面都有所改進(jìn)，使得它更加適合于大型、復(fù)雜的應(yīng)用程序開發(fā)，需要的朋友可以參考下2023-04-04
本文主要介紹了Vue的基本應(yīng)用。具有一定的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
vue3+vite中使用import.meta.glob的操作代碼
在vue2的時(shí)候，我們一般引入多個(gè)js或者其他文件，一般使用? require.context 來引入多個(gè)不同的文件，但是vite中是不支持 require的，他推出了一個(gè)功能用import.meta.glob來引入多個(gè)，單個(gè)的文件，下面通過本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下2022-11-11
這篇文章主要為大家介紹了Vue-router的嵌套路由，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue3中g(shù)etCurrentInstance示例講解
這篇文章主要給大家介紹了關(guān)于vue3中g(shù)etCurrentInstance的相關(guān)資料,文中還介紹了Vue3中關(guān)于getCurrentInstance的大坑,需要的朋友可以參考下2023-03-03
Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)4
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)的相關(guān)資料，介紹了Array的變異方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Vue?報(bào)錯(cuò)-4058?ENOENT:no?such?file?or?directory的原因及解決方法
Vue?報(bào)錯(cuò)-4058?ENOENT:?no?such?file?or?directory的原因和解決辦法,關(guān)于為什么為會(huì)報(bào)這個(gè)錯(cuò)誤,按照字面意思的理解就是沒有找到這個(gè)文件或這個(gè)路徑,說明是路徑不對,本文給大家分享解決方案,感興趣的朋友一起看看吧2023-10-10
vue項(xiàng)目使用cdn加速減少webpack打包體積
通過壓縮代碼的手段可減小網(wǎng)絡(luò)傳輸?shù)拇笮?但實(shí)際上最影響用戶體驗(yàn)的還是網(wǎng)頁首次打開時(shí)的加載等待,其根本原因是網(wǎng)絡(luò)傳輸過程耗時(shí)較大,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用cdn加速減少webpack打包體積的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定，幫大家解析神秘的Object.defineProperty方法2017-03-03
這篇文章主要介紹了vue中使用event.target.value踩坑記錄,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03