阅读 707

通过vuecli3.0+兼容IE踩坑记录,学习解决问题的方式

看完这篇文章,如果还不能解决你的vue兼容ie问题,我来手把手教你,我希望在这篇文章中,你不仅仅为了解决兼容性问题,而是学会一种解决问题的思路。

为什么需要兼容IE?

可能兼容IE是每一个前端开发者头痛的问题,谷歌、火狐他不香吗?香啊,但是不能让用户站在开发者的角度去使用产品吧?如果甲方爸爸就要用IE,你又能如何?哈哈,废话不多说,进入正题,开始我们的项目是vuecli2.0搭建的时候,解决IE非常容易,网上搜到的教程几乎都没问题,我简单说一下:

// 无非就是直接一个babel的事情
// main.js
import 'babel-polyfill'

// webpack.config.js
module: {
rules: [
      { test: /\.js$/, use: 'babel-loader' }
    ]
}
// 我们暂时不考虑webpack优化问题
复制代码

我们这篇文章重点讨论是vuecli3.0+,对于IE兼容的问题。当我们的项目升级到3.0的时候,IE浏览器每次打开的错误提示还是不一样的,这真的让我哭笑不得,最可气的是,有时候只是白屏,不报错。当然我知道出现这种情况的原因肯定和IE浏览器的缓冲机制有关。

在默认情况下,IE会缓存请求的结果。对于同一个URL地址,在缓存过期之前,只有第一次请求会真正发送到服务端。而其他浏览器,每一次请求都会向服务器重新发起。

怎么做?

遇到技术问题的时候,我认为我们首先想到的就是两个渠道,官网和github的issue。接下来我以实际情况来体现解决问题这两个渠道的效率。

版本问题的思考

现象:白屏

如果你到搜索引擎输入vuecli3 IE兼容,有非常大的可能会误导你,我举一个例子。

我们再来看一下官网的解释

大体意思就是,vuecli3+默认生成的babel配置就是支持es.promise,并且是支持es5转换,如果你围绕babel配置去思考就会走歪。

我的解决思路:升级vuecli,重新创建项目,打包后发现新的项目在IE浏览器中正常,我想跟版本肯定有关系,于是在package.json中对比相关版本,将vue以及相关版本升级到最新版。果然,白屏问题解决,但是还是无法打开浏览(是我项目的背景色,没有内容)。

2.vuecli3+对依赖包的处理(坑)

现象:打包后报错定位,发现箭头函数没有转换

当我在node_modules中搜索错误相关的信息时候,发现socket.io这个依赖报的错,当我配置到transpileDependencies中时,依然没有生效,所以正常人都会围绕transpileDependencies没生效搜索,反正我搜了好多,其中有一种说法还非常贴近,但是依然没有解决问题

于是我到npm官网去搜,发现它本身就依赖了很多包,当我尝试把debug这个包添加到transpileDependencies后,奇迹般的箭头函数消失。。。

3.IE报错public文件夹下静态文件的错

还是老办法,再去官网寻找答案,不出所料,依然有答案,直接上图

这个问题。。我是到babel的官网手动转的。。

我希望通过这边踩坑,能带来的价值除了解决兼容IE的问题,更能带来解决问题的方式。如果这边文章还没有解决你的问题,可以私聊我,我们一块探讨。