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