解决vue-cli3打包代码后，上线服务器后白屏问题

前沿

• 因为最近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开发我也是一个新手，欢迎大家互相学习！