vue 打包之后不兼容ie_vue项目打包后在IE浏览器报错,页面显示空白

在使用Vue开发的项目中,遇到打包后在IE浏览器显示白屏的问题。尝试添加babel-polyfill未解决问题,发现原因是webpack配置中使用了过时的UglifyJsPlugin。将配置更改为使用webpack内置的UglifyJsPlugin并更新相关包后,解决了IE兼容性问题。在排查此类问题时,可先注释掉打包插件部分,观察是否能正常显示以定位问题。
摘要由CSDN通过智能技术生成

之前写一个项目,一直放在谷歌浏览器调试测试,到尾声时放到IE浏览器结果直接白屏,页面打不开

找了网上的方法,加了babel-polyfill插件后还是不行,后来排查发现是打包插件出了问题,因为用的项目框架比较旧了,vue和webpack的版本都比较低.原始项目webpack配置

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

plugins: [newUglifyJsPlugin({

uglifyOptions: {

compress: {

warnings:false}

},

sourceMap: config.build.productionSourceMap,

parallel:true})

]

改成使用webpack的内置插件打包后就可以正常显示了

plugins: [newwebpack.optimize.UglifyJsPlugin({

compress: {

warnings:false}

})

]

修改webpack配置打包时可能会报错

Error: Command failed: npm run build

HappyPack: Option 'cache' has been deprecated. Configuring it will cause an error to be thrown in future versions.

[BABEL] Note: The code generator has deoptimised the styling of ".

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! tfp@1.0.0 build: `node build/build.js`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the tfp@1.0.0 build script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

这时候重新npm install更新一下包就可以了

Tip: 打包后IE显示白屏原因可能有很多,排查是否是打包插件的问题时,可以先把这里的代码注释掉,打包看看效果,如果注释后能正常显示,就是打包插件的问题.如果还是不能解决,就不是这里的问题,需要再排查别的地方

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值