一. 问题描述
vue再开发阶段一切都是正常的,都是没有什么毛病的,后来昨天测试这个打包nginx部署,发现了一个问题,那就是部署完成之后,我使用谷歌浏览器打开地址完全可以正常的打开,但是使用360,edge,百度等浏览器进行打开的时候发现要么是无法打开报错,要么就是压根打不开。我心中亿万个草泥马就飞过去了。
错误是这个样子的:
二. 原因分析
既然不行肯定得找原因,后来经过查找网络资料以及 ‘不忘初心’网友的指导,慢慢得了解到vue部分使用到了es6得语法,谷歌最新版本已经可以解析这个es6语法了,但是其它好多浏览器暂时还停留再es5上所以无法解析这个语法。所以那就想办法把这个es5在打包得过程种解析为es5那么大家就都可以识别了。
三. 问题解决
所以我找到了这个babel-polyfill这个哥们就可以做到上面得功能。vue得webpack框架运行下面命令添加:
cnpm install --save-dev babel-polyfill
之后再在main.js中导入下面代码:
import 'babel-polyfill'
然后我就重新打包进行测试,结果还是不行。此时此刻我心中已经没有草泥马了,已经全被我狠狠得干掉了。
没办法,只能一步一步得查找原因。后来查到了这篇博文 /zhumengzj/article/details/77074042 ,然后顿时毛瑟大开,我在我得index.html头部添加了下面得一段代码:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="renderer" content="webkit"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
整体上是这个样子的:
之后再进行测试,这个时候edge,360,百度等都没有问题正常打开了。(ie可能有点贱)