最近实践开发中遇到一些小的问题,踩了不少坑,记录下来方便之后避免重复踩坑。
vue兼容IE
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
no cli/webpack
一开始没有使用vue-cli,只是单个的HTML文件,毕竟在Chrome下调试没有考虑到要兼容IE,对于非cli开发的暂时也没想到办法,试过直接引入babel-polyfill的cdn或是直接引入本地babel-polyfill也不行。后来考虑到用了ES6语法,而IE不支持ES6的特性。想到将ES6语法转换成ES5。
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。
保险起见,使用browser.js(可转换不包含Promise等新的API的语法)与polyfill.js(确保API也能正常)。根据babel相关教程进行修改,别忘记设置script里type=”text/babel”,解决了部分问题,比如在IE下页面显示部分,但还是没有显示全。注意ES6是强制strict模式的,遇到报错
1 | SCRIPT1046: strict 模式下不允许一个属性有多个定义 |
由于用了elementUI,里面有一些重复的属性,从功能上考虑还是不删更好。
折腾半天还是不行,就转向了cli下。如果有小伙伴解决了这个问题欢迎分享。
cli
在cli下开发就容易多了,按照网上查找的方法成功解决问题,记得npm装一下babel-polyfill
接着在build文件夹下的webpack.base.conf.js文件中修改entry,添加babel-polyfill
1 | module.exports = { |
然后在src文件夹下的main.js入口文件中引入 babel-polyfill
1 | import "babel-polyfill" |
此时测试在IE下打开效果,同时也让小伙伴帮忙测试,同样两个人都是IE11结果却是一个能打开一个打开一片空白。结果发现能正常访问其IE浏览器默认显示版本为IE8以上,不能正常访问的用户,其IE浏览器默认显示版本都在IE8以下。不能正常显示的IE浏览器默认选用的显示版本却是IE8及以下,如下图所示:
那么解决该问题的方法就是让IE浏览器的显示版本都要大于8,具体解决方法如下:
在项目的index.html文件的head中加入以下meta语句:1
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
这句话的意思就是告诉IE浏览器,IE8以上的版本都以最高版本来渲染页面。
vue中数据修改
vue里面的v-model是双向绑定,修改对象A的时候,引用该数据的地方也会随之更改,为了避免原对象A被修改,想用一个中间变量过渡一下,所以命名一个新的对象B,对象B和原始的对象A是一样的内容,只是名字不一样,this.A=this.B,但是赋值之后发现,修改中间对象B的属性值,原始对象A也会更改,原来是vue的对象赋值,没有进行深层赋值,只是把this.A的地址指向了与this.B相同的地址,所有对于A的修改会影响到B。解决相互影响的思路是在this.A必须是新建的一个对象,这样才能保证不被指向同一地址,属性修改不会相互影响。解决方式
1 | this.A=JSON.parse(JSON.stringify(this.B)); |
vue中渲染闪烁问题
- 使用了,一闪而过的双花括号,解决方案使用v-bind
- 使用了v-if/v-show,本应隐藏的元素先显示再隐藏的问题,造成了闪烁,解决办法在v-if所在元素中加上v-cloak
在CSS中定义1
2
3[v-cloak]{
display:none;
}
vue打包静态资源路径问题
- config文件夹下下index.js中
1 | build: { |
- 若使用了iconfonts等库,还要在build文件夹下的utils.js中
1 | if (options.extract) { |
echarts关系图实例数据
查看官方实例的时候,觉得这个关系图很酷,想查看其数据格式,直接扒下来的是一个.gexf文件。
1 | $.get('data/asset/data/les-miserables.gexf', function (xml) { |
在本地依次引入了jQuery、echarts,结果dataTool在这呢
https://github.com/apache/incubator-echarts/blob/master/dist/extension/dataTool.min.js
其实也不用那么麻烦,照样可以拿到解析后的json数据。首先在原实例里添加 console.log(graph) 再运行。打开控制台里复制数据,右键打印出的数据,store as global variable,再在控制台里输入 copy(temp1) ,就可以在编辑器里粘贴了!