vue导致页面白屏几种情况

1.vue项目打包后，在非首次线上替换dist文件时，某些手机/浏览器在之后首次打开页面，可能出现白屏情况。

原因：在使用vue-cli脚手架构建完项目，项目完成后，需打包上线。默认打包方式则是 npm build，然后项目根目录会生成 dist 文件夹。服务端将该文件夹替换线上即可。但是当第n（n>1）次上线后，由于在用户端会默认缓存index.html入口文件，而由于vue打包生成的css/js都是哈希值，跟上次的文件名都不同，因此会出现找不到css/js的情况，导致白屏的产生。

优化方案：
1） meta标签

meta http-equiv=“Expires” content=“0”>
meta http-equiv=“Pragma” content=“no-cache”>
meta http-equiv=“Cache-control” content=“no-cache”>
meta http-equiv=“Cache” content=“no-cache”>

2）时间戳区分
// webpack.prod.conf.js
const Version = new Date().getTime();
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath(‘js/[name].[chunkhash].’+_Version+‘js’),
chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].’+_Version+‘js’)
}
3）服务端配置
// nginx端配置
location = /index.html {
add_header Cache-Control “no-cache, no-store”;
# add_header Cache-Control no-store;
# add_header Pragma no-cache;
}

2.npm run build打包页面空白

发现页面head中引用的js和css文件是出现了路径错误，这里修改如下：
解决位置：config/index.js文件：把assetsPublicPath: '/'改为assetsPublicPath: ‘./’

3.iOS的Safari下无法打开网页

webpack-dev-server >= 2.8.0 的版本在 iOS Safari 下无法打开网页，效果为白屏。

4.Vue在IE、低版本Android显示空白问题

这是由于IE对promise的支持不好，我们需要安装：babel-polyfill和es6-promise: