踩坑小结

最近实践开发中遇到一些小的问题,踩了不少坑,记录下来方便之后避免重复踩坑。

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
2
3
4
5
6
7
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js', //将这行注释掉
app: ["babel-polyfill", "./src/main.js"], //添加这行
}
...

然后在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打包静态资源路径问题

  1. config文件夹下下index.js中
1
2
3
4
5
6
7
8
build: {
...
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //加一个"."
...
}
  1. 若使用了iconfonts等库,还要在build文件夹下的utils.js中
1
2
3
4
5
6
7
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: "../../" //添加这一行
})
}

echarts关系图实例数据

查看官方实例的时候,觉得这个关系图很酷,想查看其数据格式,直接扒下来的是一个.gexf文件。

1
2
3
$.get('data/asset/data/les-miserables.gexf', function (xml) {
var graph = echarts.dataTool.gexf.parse(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) ,就可以在编辑器里粘贴了!