前端踩坑记录，持续更新（也希望小伙伴私信投稿一起记录）

一、移动端

1、JavaScript

1）低版本手机es6兼容问题，ie兼容问题，以及ios低版本页面白屏

npm install --save-dev babel-polyfill


// main.js中引入
import "babel-polyfill";


// webpack.base.conf.js文件中修改
entry: {
  	app: ['babel-polyfill', './src/main.js']
}

2）vue-cli项目config/index.js文件，sourceMap导致ios9.x版本访问白屏，解决方法

productionSourceMap: false

3）npm安装依赖导致的白屏 

npm6.9.0下载包，打包项目后会导致ios9.x版本访问白屏
使用npm6.4.1版本，再指向淘宝镜像，重新下载安装包，在build完美解决

2、HTML

---

3、CSS

---

1）移动端白屏及兼容问题（仅只在微信公众号运行过，其他浏览器情况未知）

ios8.x版本flex布局兼容问题
需加上-webkit-前缀

4、TypeScript

---

5、HTTP和HTTPS 

---

二、web端

1、JavaScript

---

 1）

ie浏览器、ios设备new Date('2020-05-20 20:20:20').getTime()日期时间戳获取NAN问题
日期需要以 ‘/’ 符号拼接，如：2020-05-20 20:20:20 需改为 2020/05/20 20:20:20，再进行时间戳转换

2） 前端对接网易七鱼客服踩坑：

ysf('config', {
	uid: ''	// (若没有uid，则传空字符串'', 若传null会导致七鱼获取访客用户信息异常)
})

2、HTML

---

3、CSS

---

4、TypeScript

---

5、HTTP和HTTPS 

---

1）华为云OBS文件上传文档 部分参数用法及demo比官网更细致

2）各种echarts图表案例 非常多比官方丰富的特殊echarts图表

3）linux服务器使用pm2运行egg.js项目
项目根目录创建server.js文件，放入以下代码，执行命令 pm2 start server.js --name egg-service

1. // server.js
   const egg = require('egg');
   
   const workers = Number(process.argv[2] || require('os').cpus().length);
   egg.startCluster({
     workers,
     baseDir: __dirname,
   });
   

三、依赖

1）安装sass-loader后报错：TypeError: this.getOptions is not a function

 解决办法：卸载旧版本，安装符合的版本，经测试以下版本解决，其他版本可自行测试
"node-sass": "^4.14.1"
"sass-loader": "^8.0.2" 

四、浏览器 

1） ie浏览器 button子元素无法触发点击事件

不使用button按钮，或将需要点击的子元素放button外

 2）ie浏览器使用new FileReader()下载blob文件报错：传递给系统调用的数据区域太小

        let blob = res;
        // ie blob文件下载
        if(navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(new Blob([blob], { type: 'text/csv;charset=utf-8;' }), 'filename.xls')
        } else {
	        const fileReader = new FileReader();
	        try {
	          fileReader.readAsDataURL(blob);
	        } catch (err) {
	        }
	        // 读取文件成功
	        fileReader.onload = (event) => {
	          let a = document.createElement('a');
	          let _fileName = 'filename.xls';
	          a.download = _fileName;
	          a.href = event.target.result;
	          document.body.appendChild(a);
	          a.click();
	          document.body.removeChild(a);
	        }
	        // 读取完成（成功/失败）
	        fileReader.onloadend = (event) => {
	          console.log('onloadend')
	        }
		}

3) Cookie

1.secure属性

如果是想在客户端即网页中通过 js 去设置secure类型的 cookie，必须保证网页是https协议的。在http协议的网页中是无法设置secure类型cookie的。

4) 对象属性值更新后页面不更新 

如果对象的属性使用的数组或者对象里的值，那么在对于该对象为这个属性赋值的时候不能直接简单使用相同字符串的值，而是要引用属性的方法

5) 谷歌浏览器离线安装包下载地址

https://www.google.com/chrome/browser/desktop/index.html?platform=win64&extra=stablechannel&standalone=1
直接点击【下载 Chrome】按钮就是离线安装包了

五、UI库

element-ui

1）el-cascader

如果是动态加载options的话，可能会报can’t read property ‘level’ of null, 此时可以加key值（比如监听options, options改变的时候改变key的值）通过改变key使el-cascader重新渲染。

2）el-transfer

el-transfer放到el-form里面的时候样式有可能会错乱，多出空行的情况，经研究后解决。
原因：el-checkbox里面一个样式是display: inline-block，这个样式覆盖了原本的样式：

.el-transfer-panel__item {
	display: block;
  }

解决方法：将上述样式重新赋值覆盖checkbox的样式使block样式生效即可 

3) el-table

el-table使用了fixed以后，样式错乱，百度的方法没有用，发现是el-table同层的样式有一个padding-top/bottom的值，由于el-table的fixed使用的asolute布局，所以fixed那一列样式会跟其他列不同（其他列会受到上述的padding-top/bottom影响位置，所以使用fixed时候不能用padding-top/bottom，left和right不会有影响），我真的气死了，浪费了我好久时间

 六、VUE

1）VueI18n使用报错

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import routes from './router/index'
import lang from './lang/index'
Vue.use(
  VueI18n
)
const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: "ch", // 默认中文
  messages: lang
})
new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

 一开始new VueI18n()一直报错【Cannot read properties of undefined (reading ‘config’)】，找了好久终于发现VueI18n挂载要在new之前，也就是说Vue.use(VueI18n)要写在new VueI18n()之前，类似于上面代码

路由导航守卫踩坑

---

if (getToken() || cancel.includes(to.path)) {
        next()
    } else {
        console.log(to)
        // 注意这里一定要 多加一层判断 否则可能会进入回调地狱 或者 不能跳转问题
        if (to.path === "/login") {
            next()
        } else {
            useElNotification({
                title: "token 失效",
                message: "请重新登录~TnT~",
                type: "warning"
            })
            next({path:"/login"})
        }
    }

七、React