第一种，打包后文件引用路径不对，导致找不到文件报错白屏
解决办法：修改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。
第二种，由于把路由模式mode设置影响
解决方法：路由里边router/index.js路由配置里边默认模式是hash，如果你改成了history模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行 。如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html，这个页面就是你app依赖页面。
所以只要删除mode或者把mode改成hash就OK了。
第三种，项目中使用了es6的语法，一些浏览器不支持es6，造成编译错误不能解析而造成白屏
解决方法：
- 安装 npm install --save-dev babel-preset-es2015
- 安装 npm install --save-dev babel-preset-stage-3
- 在项目根目录创建一个.babelrc文件 里面内容 最基本配置是：
{
// 此项指明，转码的规则
"presets": [
// env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码，并且设置amd,commonjs这样的模块化文件，不进行转码
["env", {
"modules": false
}],
// 下面这个是不同阶段出现的es语法，包含不同的转码插件
"stage-2"
],
// 下面这个选项是引用插件来处理代码的转换，transform-runtime用来处理全局函数和优化babel编译
"plugins": ["transform-runtime"],
// 下面指的是在生成的文件中，不产生注释
"comments": false,
// 下面这段是在特定的环境中所执行的转码规则，当环境变量是下面的test就会覆盖上面的设置
"env": {
// test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一个用来测试转码后代码的工具
"plugins": ["istanbul"]
}
}
}
第四种，如果你的测试说你的项目在 ios 10 出现白屏问题
一个 bug
你用Vue做了一个单页面应用，它在一切设备上都工作正常，但是突然有一天，你的测试和你说，这个网站在iOS 10上跑不起来，怎么办？
项目在Safari中报一个错误：
SyntaxError: Cannot declare a let variable twice: 'e'.
可是你没有写过这样的代码，你怎么可能把一个名为e的变量定义两次？打开代码，会看到了这样的代码：
let e = e => {
console.log(e);
for (let e of [1, 2, 3])
console.log(e);
};
虽然这段代码看上去比较奇怪，但是语法上有任何问题吗？我就愿意定义一个名为e的函数，而这个函数的唯一入参名称也为e，并且我的for循环体里还愿意再定义一个名称为e的变量，es6的变量作用域允许我们这样做，此e和彼e互不干扰，不对吗？况且很显然，这段代码不是人写的，而是我们在执行npm run build的时候编译产生的。
其实我们都没有错，我们也没写错，uglify也没搞错，错的是Safari本身。他们在第十七万一千零四十一号bug中承认了自己的错误：
We incorrectly throw a syntax error when declaring a top level for-loop iteration variable the same as a parameter
当你定义一个与参数同名的for循环迭代变量时，我们错误地认为这是一个语法错误。
看，多么谦逊的态度。所以你也不用太纠结于一个白屏幕，只要找到解决方法就好了。方法其实很简单：
1.进入build文件夹；
2.找到webpack.prod.conf.js文件；
3.在UglifyPlugin的定义里添加关于mangle的选项，使它变成下面这个样子：
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
},
mangle: {
safari10: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
另一个 bug
实际上，除此之外，还有另外一个bug也会影响到vue网页在iOS 10上的展现，特别是当你用到广为流传的Swiper插件的时候。这是因为Swiper插件中用到了ES6的语法a = b ** c，a是b的c次方，而iOS 10的Safari里不认识这样的语法，认为这是一个错误，所以你需要让Swiper经过babel的包装，而缺省状态下babel是不对node_modules里的模块进行编译的。
解决方法是在项目根目录下新建一个文件vue.config.js，在里面添加如下语句：
module.exports = {
chainWebpack: config => {
config.rule('js').include.add(/node_modules\/(dom7|swiper)\/.*/)
}
}
至此，通常情况下导致项目出现白屏的问题，总结完毕
网友评论