此次項目開發(fā)完后準(zhǔn)備打包，因為hash模式的路徑帶#看著實在是有點丑，所以采用history模式。因為本次項目屬于以前網(wǎng)站重構(gòu)，但是seo問題，所以需要以前的一些地址路徑寫，所以vue-router的路徑全部重改了。打包后查了網(wǎng)上一大堆，都說要把config里的index.js 里的build里的

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)山陰,十載網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

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)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。

分享題目：淺談vue項目4rsvue-router上線后history模式遇到的坑
轉(zhuǎn)載源于：http://www.chinadenli.net/article26/gcchcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、微信公眾號、軟件開發(fā)、網(wǎng)站改版、網(wǎng)站排名、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)