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

前沿

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