vue项目白屏问题汇总
1,ios10 出现白屏
原因是由于ios 10中Safari中错误描述如下:当你定义一个与参数同名的for循环迭代变量时,我们错误地认为这是一个语法错误。解决方法如下:
进入build文件夹;
找到webpack.prod.conf.js文件;
在UglifyPlugin的定义里添加关于mangle的选项,使它变成下面这个样子
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
},
mangle: {
safari10: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
2,Swiper插件导致白屏
解决方法是在项目根目录下新建一个文件vue.config.js,在里面添加如下语句:
module.exports = { chainWebpack: config => {
config.rule(‘js’).include.add(/node_modules/(dom7|swiper)/.*/) } }
3,npm run build打包页面空白
打包后,我们直接本地打开dist文件夹下的index.html文件,结果白屏了!我们会发现页面head中引用的js和css文件是出现了路径错误,这里修改如下:
解决位置:config/index.js
文件:把assetsPublicPath: '/'改为assetsPublicPath: './'
build: {undefined
assetsPublicPath: ‘./’,
}
4,升级vue2+部分手机访问出现页面空白
npm run dev后可能出现无法加载到路由模板的信息。
解决位置:config/index.js文件:把 devtool: ‘#eval-source-map’ 改为devtool:‘inline-source-map’
devtool: ‘#eval-source-map’
//改为
devtool:‘inline-source-map’
5,升级vue2+IP访问页面空白
默认只能通过localhost或者127.0.0.1才能访问,如果使用本机的Ip地址会出现无法访问到的情况。
解决位置:config/index.js文件:把config/index.js中“host” 配置为“0.0.0.0”就可以解决,或者设置为你电脑的IP地址也行;
6,Vue在IE、低版本Android显示空白问题
这是由于IE对promise的支持不好,我们需要安装:babel-polyfill和es6-promise:
npm install babel-polyfill
npm install es6-promise
然后在main.js文件中引用:
import 'babel-polyfill'
import Vue from 'vue'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()
最后 build/webpack.base.conf.js 文件中配置如下:
module.exports = {undefined
entry: {undefined
app: [“babel-polyfill”, “./src/main.js”]
} };
通过以上方法,已经基本上能够解决你遇到的大部分白屏问题,但是很可能仍然有部分小苹果还是显示白屏,往下看:
1.于是开始理性的分析,首先白屏的原因与静态资源没加载相关,所以优先排查打包后的index.html文件,发现文件里面引用资源的路径都没有引号,会不会是 打包后没带引号引起的?
需要在webpack.prod.conf.js 找到minify参数
将 removeAttributeQuotes: true
改为 removeAttributeQuotes: false
打包后,已经自动添加了引号。
2.这时候,打开你打包后的页面,你可能会碰到页面上部分内容是空白的情况,咦?这是啥子情况?一般出现这种情况,都是因为你将静态图片资源作为了background,打包后路径有误导致的。
打开build文件夹下的utils.js文件,找到下面这段代码,添加publicPath,修改成如下内容:
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../',
fallback: 'vue-style-loader'
})
}
搬运地址:https://blog.csdn.net/zhongguohaoshaonian/article/details/88944449
以上修改之后,还是不行
我修改了index.html的script引用,绝对地址改成相对地址,就好了
后来页面又莫名其妙失踪了,我做了如下修改
new UglifyJsPlugin({
uglifyOptions: {
safari10: true,// iOS10适配 +
compress: {
warnings: false,
},
},
sourceMap: config.build.productionSourceMap,
parallel: true,
}),
搬运地址:https://blog.csdn.net/qq_36235241/article/details/122955994