1.路由模式為hash(默認(rèn))
打包時(shí)需要注意配置文件下的assetsPublicPath
2.路由模式為history
本地打包之后本地啟動(dòng)
我們使用node.js啟動(dòng)本地服務(wù)器運(yùn)動(dòng)打包項(xiàng)目
新建server.js
var express = require('express');
const app = express();
let history = require('connect-history-api-fallback')
//重定向到index.html
history({
rewrites: [{
from: /^\/libs\/.*$/,
to: '/index.html'
}]
});
app.use(history());
app.use(express.static('./dist'));
app.listen('8088',()=>{
console.log('服務(wù)器啟動(dòng)')
})
因?yàn)槲覀兟酚赡Ｊ綖閔istory 所以我們打開localhost:8088，訪問非主頁時(shí)頁面提示Cannot GET /xxx 這是因?yàn)椋?/p>
你訪問http://localhost:8088時(shí)堕仔，靜態(tài)服務(wù)器（這里是nginx）會(huì)默認(rèn)去目標(biāo)目錄（這里為location中root所指定的目錄）下尋找index.html（這是nginx在端口后沒有額外路徑時(shí)的默認(rèn)行為）揣炕，目標(biāo)目錄下有這個(gè)文件嗎棚辽？有！然后靜態(tài)服務(wù)器返回給你這個(gè)文件祝懂，配合vue-router進(jìn)行轉(zhuǎn)發(fā)莹桅，自然可以（部分）正常顯示。
但如果直接訪問http://localhost:8088/home摄杂，靜態(tài)服務(wù)器會(huì)去目標(biāo)目錄下尋找home文件，目標(biāo)目錄下有這個(gè)文件嗎循榆？沒有析恢！所以自然就404了。
我們這里添加上面的connect-history-api-fallback秧饮，當(dāng)頁面訪問錯(cuò)誤的時(shí)候自動(dòng)重定向到index.html映挂。
如果是部署到服務(wù)器上泽篮，我們可以配置nginx。
因?yàn)樵趆istory 模式下柑船，只是動(dòng)態(tài)的通過js 操作window.history 來改變有瀏覽器地址欄里的路徑帽撑，并沒有發(fā)起http請(qǐng)求，但當(dāng)你直接 在瀏覽器里輸入這個(gè)地址的時(shí)候 就一定要先對(duì)服務(wù)器放起http請(qǐng)求鞍时，但是這個(gè)目標(biāo)在服務(wù)器上又不存在所以就返回了404了亏拉，怎么解決呢，就是把所有的請(qǐng)求全部轉(zhuǎn)發(fā)到http://www.xxx.com/hot/index.hmtl上就可以了
location / {
try_files $uri $uri/ /index.html;
}
