技术小结 | 记一次Vue2.0兼容IE浏览器

序言

最近刚追完《雪中悍刀行》，感觉自己牛逼的不行

• 天不生我李淳刚，万古如长夜?

结果第二天就接到了一个活，Vue2.0兼容IE，自己电脑上是win11，还有没ie的环境，啊这….

不方便拿公司项目展示，自己就新建一个环境，XDM不需要环境的，直接拉到下面

环境准备

npm uninstall @vue/cli -g
cnpm install vue-cli -g
vue init webpack project-name
? Project name project-name
? Project description A Vue.js project
? Author chenshengqiang <chenshengqiang@zhuojianchina.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

复制代码

装完依赖之后

理论

行政致远，理论先行。先准备准备前置知识

Vue能兼容给ie吗？

当前可以，这文档上说了哈，

那么重点来了，ES5是啥？别急，也有飞机票是英文的，慢慢啃

Vue怎么兼容ie

Vue2.0是webpack编译的，那大概是在webpack上动手脚。需要几个插件

1. babel-polyfill  用来转换js语法
2. es6-promise 不支持promise 需要用这个包的的垫片
3. babel-preset-es2015 babel es2015插件
4. classlist-polyfill 原生Element.classlist的垫片
复制代码

classlist的MDN飞机票

开整

cnpm i babel-polyfill es6-promise babel-preset-es2015 classlist-polyfill -D
复制代码

• mian.js

• build/webpack.base.js

• .babelrc

• index.html

特殊处理

node_modules中的包有些需要用babel来转换一下

• build/webpack.base.conf.js

结束语

到这就算大功告成了，如有不到之处请批评指正

文章推荐

• ✍技术总结 | 前端萌新现在上车Docker，还来得及么？
• ✍掌握sass这些技能，帮助提升开发效率
• ✍面试官再问call、apply、bind。来来来、我给你手写一个！
• ✍小白易懂 | 15分钟基于vue/cli完成服务端渲染