解决vue-cli3打包代码后,上线服务器后白屏问题(转)

释放双眼,带上耳机,听听看~!
vue打包后白屏是什么原因?

前沿

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

---------------------

作者:weixin_34315485

来源:CSDN

原文:https://blog.csdn.net/weixin_34315485/article/details/87595154

人已赞赏
编程

一个网页端表格JS库x-spreadsheet

2019-3-11 21:54:44

编程

【MongoDB未授权访问】

2019-3-24 20:10:54

个人中心
今日签到
有新私信 私信列表
有新消息 消息中心
搜索