前言
作为一个前端,可能绝大多数的时间都是在写的业务代码,时间一长,大家会觉得乏味、没意思等等,但是其实就算只是写业务代码,我们也依然能够找到有兴趣的点,说的简单一点就是代码优化,不仅仅局限在业务逻辑这块,像是代码复用、效率等等都是我们可以加以改进的地方,学会在业务代码中找到不足,总结经验,这样日积月累,量变产生质变,必然我们的技术也是不断再上升的。今天其实就是说下我在vue项目中进行的一些总结或者是经验,如果有错误的地方也是欢迎大家指正。
1.兼容IE11
用过vue的同学们应该都比较清楚,vue其实是可以兼容ie9的,但是这种兼容并不是说,你写了一个项目,打开ie9就能兼容了,是需要用工具将代码进行转换的。我之前也是这样以为的,直到近期一个项目完成之后,打开ie11,发现页面显示正常的,但是所有的http请求都是无效的,经过了一番查找,才知道这个babel-polyfill的包的用处,当然知道的同学可以略过啦,不知道的话,跟着我继续往下看
我们使用现代浏览器的话,很多像是es7、es8的语法,可能都是已经支持了,但是放在ie上,这些方法都是通通不认识的,因此我们就需要一个工具来将这些ie浏览器不认识的语法转换成ie所认识的,那么知道了这个babel的包,其实就很简单了,我们直接这样在vue中的main.js中引入这个包即可
import "babel-polyfill";
但是这样引入的话,在打包的时候,包可能会比较大,会影响到前端页面的打开速度,所以又出现了一种按需转译的用法,即当我们需要用到转译代码的时候,会替我们转译,并不是一次转译所有的代码,这种用法同学们应该也是非常熟悉了,就是所谓的“懒加载”,和vue的路由懒加载是一个道理,那么如何使用呢,首先下载的是一个@babel/polyfill的包,这个包的话也是一个翻译代码的作用,但是可以进行配置来实现按需加载
npm i @babel/polyfill -D
然后我们需要在babel.config.js中进行按需加载的配置
presets: [
'@vue/app',
[
'@babel/preset-env',
{
'useBuiltIns': 'entry'
}
]
]
注意这个@babel/preset-env是一个有关环境变量的包,这个包在你使用vue脚手架3.0创建项目时就会自带这个包了,所以是不需要下载的,最后在main.js中引入我们之前下载的包就可以了。
import "