前沿
- 因為最近vue剛剛發(fā)版了最新版本的vue-cli3，而最近剛剛好有個項目要遷移到vue吞获，所以經(jīng)過討論况凉，大家一起入坑VUE；然后我也剛好可以練手剛學(xué)一周的vue衫哥，結(jié)合TypeScript和vuex等全家桶的框架茎刚；后期
- 噗呲噗呲的大家在開發(fā)調(diào)試的時候，寫得各種爽撤逢，各種調(diào)試都OK
問題來了
- 過了幾天，產(chǎn)品大大跑過來問，你們開發(fā)這兩天可以提測一部分了沒有蚊荣？可以的話就先上線一部分功能給QA測試先唄初狰；看這幾天寫代碼很爽就答應(yīng)產(chǎn)品了
- 那就開始打包吧
執(zhí)行打包命令：vue-cli-service build - 成功后查看dist已經(jīng)打包成功，然后自己啟動本地一個node服務(wù)互例，查看打包出來頁面是否有異常等奢入；跑起來后，在網(wǎng)頁上輸入地址測試發(fā)現(xiàn)一片白屏
- 然后覺得會不會是我本地Node服務(wù)有問題媳叨？上線測試環(huán)境看看情況腥光，哦豁，一樣的白屏
- 然后各種代碼檢查糊秆，配置檢查武福，感覺沒有問題啊，這可咋辦痘番？
問題定位
- 跑到vue官網(wǎng)各種查找捉片，也沒發(fā)現(xiàn)有用信息呀
- 跑各種網(wǎng)站資料翻一翻，突然發(fā)現(xiàn)一個有類似問題汞舱，一看vue-router的mode配置可能會影像打包后的鏈接地址伍纫，然后看看我自己的router:
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/home",
name: "home",
component: Home,
meta: {
keepAlive: true
},
children:[
]
},
.....
]
})
然后在查看vue-router對mode的說明：
mode
類型:
string默認值:
"hash" (瀏覽器環(huán)境) | "abstract" (Node.js 環(huán)境)-
可選值:
"hash" | "history" | "abstract"配置路由模式:
hash: 使用 URL hash 值來作路由。支持所有瀏覽器昂芜，包括不支持 HTML5 History Api 的瀏覽器莹规。history: 依賴 HTML5 History API 和服務(wù)器配置。附上鏈接查看 HTML5 History 模式配置.abstract: 支持所有 JavaScript 運行環(huán)境泌神，如 Node.js 服務(wù)器端良漱。如果發(fā)現(xiàn)沒有瀏覽器的 API，路由會自動強制進入這個模式腻扇。
解決辦法
終于弄明白了债热，如果使用history模式上線，必須要服務(wù)端在服務(wù)器上有對應(yīng)的模式才能使用history（看上面鏈接）幼苛，如果服務(wù)器上沒有配置窒篱，可以先使用默認的hash；
當(dāng)然個人建議還是使用history模式舶沿，因為這樣鏈接看起來要美觀些
OK墙杯，作為一名合格的前端開發(fā)，遇到問題解決問題括荡！對于vue開發(fā)我也是一個新手高镐，歡迎大家互相學(xué)習(xí)！
