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

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

 

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

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    })
 ]

 

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

plugins: [
  new webpack.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显示白屏原因可能有很多,排查是否是打包插件的问题时,可以先把这里的代码注释掉,打包看看效果,如果注释后能正常显示,就是打包插件的问题.如果还是不能解决,就不是这里的问题,需要再排查别的地方