淺談vue項目4rs vue-router上線后history模式遇到的坑
此次項目開發(fā)完后準(zhǔn)備打包，因為hash模式的路徑帶#看著實在是有點丑，所以采用history模式。因為本次項目屬于以前網(wǎng)站重構(gòu)，但是seo問題，所以需要以前的一些地址路徑寫，所以vue-router的路徑全部重改了。打包后查了網(wǎng)上一大堆，都說要把config里的index.js 里的build里的
assetsPublicPath: '/'改成‘./'，打包上線發(fā)現(xiàn)在hash模式下是沒問題的，
但一旦改成history模式，有些動態(tài)js文件的路徑都是錯的。無奈之下死馬當(dāng)活馬醫(yī)，把‘./'改回了‘/'在history模式
下再次打包上線，發(fā)現(xiàn)點擊跳轉(zhuǎn)頁面都是正常的，有些小激動。但是history模式的通病就是不能刷新，
因為原來跳轉(zhuǎn)時其實不是通過請求服務(wù)器的，而是通過js操作history的API改變地址完成的。
當(dāng)你刷新了之后瀏覽器就耿直的去請求服務(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)刷新是正常的，但是路徑后面總是多了個"/",看著很是奇怪,就試著改成當(dāng)前下的html文件，發(fā)現(xiàn)真的可以。從此大功告成。
以上這篇淺談vue項目4rs vue-router上線后history模式遇到的坑就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中使用sass及解決sass-loader版本過高導(dǎo)致的編譯錯誤問題
這篇文章主要介紹了vue中使用sass及解決sass-loader版本過高導(dǎo)致的編譯錯誤問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這段時間一直在弄vue，當(dāng)然也遇到很多問題，這里就來跟大家分享一些注冊自定義模板組件的心得 ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了解讀resetFields()不生效的原因，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
解決vue項目input輸入框雙向綁定數(shù)據(jù)不實時生效問題
這篇文章主要介紹了解決vue項目input輸入框雙向綁定數(shù)據(jù)不實時生效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue?2源碼閱讀?Provide?Inject?依賴注入詳解
這篇文章主要為大家介紹了Vue?2源碼閱讀?Provide?Inject?依賴注入詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue中style設(shè)置scoped后部分樣式不生效的解決
這篇文章主要介紹了vue中style設(shè)置scoped后部分樣式不生效的解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
這篇文章主要介紹了vue3的動態(tài)組件是如何工作的，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue3+cesium環(huán)境搭建的實現(xiàn)示例
本文主要介紹了Vue3+cesium環(huán)境搭建的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
如何在 Vite 項目中自動為每個 Vue 文件導(dǎo)入 base.les
在Vite配置中通過添加css.preprocessorOptions實現(xiàn)自動導(dǎo)入base.less,簡化Vue組件的樣式設(shè)置,提高代碼的可維護(hù)性,感興趣的朋友跟隨小編一起看看吧2024-09-09
vue使用vue-json-viewer展示JSON數(shù)據(jù)的詳細(xì)步驟
最近在開發(fā)一個公司的投放管理系統(tǒng)的操作日志模塊,要查看某條操作日志的請求參數(shù),要將請求的參數(shù)以JSON格式的形式展示出來,下面這篇文章主要給大家介紹了vue使用vue-json-viewer展示JSON數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-09-09