前沿

• 因為最近vue剛剛發版了最新版本的vue-cli3，而最近剛剛好有個項目要遷移到vue，所以經過討論，大家一起入坑VUE；然后我也剛好可以練手剛學一周的vue，結合TypeScript和vuex等全家桶的框架；后期
• 噗呲噗呲的大家在開發調試的時候，寫得各種爽，各種調試都OK

問題來了

1. 過了幾天，產品大大跑過來問，你們開發這兩天可以提測一部分了沒有？可以的話就先上線一部分功能給QA測試先唄；看這幾天寫代碼很爽就答應產品了
2. 那就開始打包吧
   執行打包命令： vue-cli-service build
3. 成功后查看dist已經打包成功，然后自己啟動本地一個node服務，查看打包出來頁面是否有異常等；跑起來后，在網頁上輸入地址測試發現一片白屏
4. 然后覺得會不會是我本地Node服務有問題？上線測試環境看看情況，哦豁，一樣的白屏
5. 然后各種代碼檢查，配置檢查，感覺沒有問題啊，這可咋辦？

問題定位

1. 跑到vue官網各種查找，也沒發現有用信息呀
2. 跑各種網站資料翻一翻，突然發現一個有類似問題，一看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" (瀏覽器環境) | "abstract" (Node.js 環境)

• 可選值: "hash" | "history" | "abstract"

  配置路由模式:

  • hash: 使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器。

  • history: 依賴 HTML5 History API 和服務器配置。附上鏈接查看 HTML5 History 模式配置.

  • abstract: 支持所有 JavaScript 運行環境，如 Node.js 服務器端。如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式。

解決辦法

終于弄明白了，如果使用history模式上線，必須要服務端在服務器上有對應的模式才能使用history（看上面鏈接），如果服務器上沒有配置，可以先使用默認的hash；
當然個人建議還是使用history模式，因為這樣鏈接看起來要美觀些

OK，作為一名合格的前端開發，遇到問題解決問題！對于vue開發我也是一個新手，歡迎大家互相學習！