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顯示白屏原因可能有很多,排查是否是打包插件的問題時,可以先把這里的代碼注釋掉,打包看看效果,如果注釋后能正常顯示,就是打包插件的問題.如果還是不能解決,就不是這里的問題,需要再排查別的地方