前沿
- 因为最近vue刚刚发版了最新版本的vue-cli3，而最近刚刚好有个项目要迁移到vue，所以经过讨论，大家一起入坑VUE；然后我也刚好可以练手刚学一周的vue，结合TypeScript和vuex等全家桶的框架；后期
- 噗呲噗呲的大家在开发调试的时候，写得各种爽，各种调试都OK
问题来了
- 过了几天，产品大大跑过来问，你们开发这两天可以提测一部分了没有？可以的话就先上线一部分功能给QA测试先呗；看这几天写代码很爽就答应产品了
- 那就开始打包吧
执行打包命令：vue-cli-service build - 成功后查看dist已经打包成功，然后自己启动本地一个node服务，查看打包出来页面是否有异常等；跑起来后，在网页上输入地址测试发现一片白屏
- 然后觉得会不会是我本地Node服务有问题？上线测试环境看看情况，哦豁，一样的白屏
- 然后各种代码检查，配置检查，感觉没有问题啊，这可咋办？
问题定位
- 跑到vue官网各种查找，也没发现有用信息呀
- 跑各种网站资料翻一翻，突然发现一个有类似问题，一看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开发我也是一个新手，欢迎大家互相学习！
