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

之前写一个项目,一直放在谷歌浏览器调试测试,到尾声时放到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显示白屏原因可能有很多,排查是否是打包插件的问题时,可以先把这里的代码注释掉,打包看看效果,如果注释后能正常显示,就是打包插件的问题.如果还是不能解决,就不是这里的问题,需要再排查别的地方

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

vue项目在vscode中编译eslint报错没显示红色波浪线提示
vue项目在vscode中编译eslint报错没显示红色波浪线提示. 如下图所示: 下图是预期效果: 不符合Eslint校验规则的代码位置都能展示出来,这样一目了然.能帮助我们迅速找到报错的位置. 然 ...
打包后index.html路径错误,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 2018年05月23日 10:05:35 for_weber 阅读数:14179 Vue项目运行npm run buil ...
th:text为null报错_小猿圈web前端之vue-cli项目打包完成后运行文件路径报错问题
学习前端的小伙伴越来越多,问题也就越多,前面基础部分还好一些,特别是一到框架的时候,难住了一大部分人,今天小猿圈web前端讲师就为大家总结了vue-cli项目打包完成后运行文件路径报错问题,有兴趣的小 ...
使用idea打包war包和maven项目打包war包放到tomcat中运行，以及报404错误的解决
使用idea打包war包和maven项目打包war包放到tomcat中运行,以及报404错误的解决在tomcat下运行打包的war包,访问时显示404 浅谈打包war包的方式第一种: 第一步: 第 ...
vue项目在ie、360兼容模式页面显示空白问题
vue项目中,出现在ie与360兼容模式下打开页面呈现空白问题,如下: 控制台报main.js中语法错误~ 上网搜了一下,大部分解决方案是在webpack配置中与main.js中引入babel-pol ...
vue项目初始化时npm run dev报错webpack-dev-server解决方法
vue项目初始化时npm run dev报错webpack-dev-server解决方法参考文章: (1)vue项目初始化时npm run dev报错webpack-dev-server解决方法 ( ...
解决vue-pdf 打包后生成worker文件报错问题
解决vue-pdf 打包后生成worker文件报错问题安装 vue-pdf npm install --save vue-pdf 进入目录 node_modules/worker-loader/di ...
css引入报错,vue项目通过import引入外部css报错怎么办
vue项目通过import引入外部css报错的解决办法:首先在[webpack.config.js]中添加相关内容,添加后重新npm run dev:然后json文件中查看是否存在[css-loade ...
Elastic-Job项目启动后，控制台一直报Cron表达式有误且Cron表达式与当前配置的表达式不一样
问题描述:Elastic-Job项目启动后,控制台一直报配置的Cron表达式有误且Cron表达式与当前配置的表达式不一样,报错的Cron表达式是旧的配置解决方法:引起该问题的原因是首次报Cron表达 ...

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

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

最新文章

热门文章