溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
此次項目開發完后準備打包，因為hash模式的路徑帶#看著實在是有點丑，所以采用history模式。因為本次項目屬于以前網站重構，但是seo問題，所以需要以前的一些地址路徑寫，所以vue-router的路徑全部重改了。打包后查了網上一大堆，都說要把config里的index.js 里的build里的
assetsPublicPath: '/'改成‘./'，打包上線發現在hash模式下是沒問題的，
但一旦改成history模式，有些動態js文件的路徑都是錯的。無奈之下死馬當活馬醫，把‘./'改回了‘/'在history模式
下再次打包上線，發現點擊跳轉頁面都是正常的，有些小激動。但是history模式的通病就是不能刷新，
因為原來跳轉時其實不是通過請求服務器的，而是通過js操作history的API改變地址完成的。
當你刷新了之后瀏覽器就耿直的去請求服務器了，然而服務器沒有這個路由，于是就404了。
解決方法1：可以做個代理，讓所有訪問服務器的地址都返回同一個入口文件。（推薦使用）
解決方法2：采用靜態文件的形式讓每個目錄都存在就不會報錯了
我們服務器是采用nginx，我不會，沒弄，就自己用了nodejs和express搭建了個簡單服務器，并采用了官方推薦的中間件
connect-history-api-fallback
使用方法：
在服務器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: '/' }
]
}));
這樣的，發現刷新是正常的，但是路徑后面總是多了個"/",看著很是奇怪,就試著改成當前下的html文件，發現真的可以。從此大功告成。
以上這篇淺談vue項目4rs vue-router上線后history模式遇到的坑就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
