2021-12-24 vue项目兼容IE

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但对于 IE9+，Vue 底层是支持。

vue/cli4脚手架搭建的前端项目，vue版本2.6.12
browserslist配置（指定了项目的目标浏览器的范围，这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀）：

  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]

1. SCRIPT1002：语法错误 IE11打包后白屏

首先安装babel-polyfill，兼容ES6语法

npm install --save-dev babel-polyfill

修改文件babel.config.js的presets

// presets: [["@vue/app", {useBuiltIns: "entry",}]],// 此为vue/cli3
presets: [["@vue/cli-plugin-babel/preset", {useBuiltIns: "entry",}]],// 此为vue/cli4

不生效，所以可能是真的语法写的有问题，看报错文件位置的代码猜测应该是关于画图的一些插件。遂检查发现是同事在main.js初始化某绘图插件的语法有误。修改后就好了。

2. SCRIPT1006：缺少 ‘)’ 多个页面报错

第三方插件引入导致（比如第三方插件中有ES6语法，node modules中的文件是不会被Babel编译的，除非声明在transpileDependencies中）

在 vue.config.js 的 transpileDependencies 添加要显示依赖的插件

module.exports = {
  	transpileDependencies: [
  		"clipboard",
	]
}

3. ChunkLoadError 路由跳转失败

在vue项目中用vue-router做路由，做代码分割和懒加载时，由于webpack配置不当，导致懒加载chunk时相对路径出现混乱导致加载chunk失败。

很可能是静态资源路径根未指定，相对路径相对于当前url目录导致，修改 vue.config.js 文件：

devServer： {
	publicPath: '/', // 公共路径 打包后资源可以访问的路径
}

4. 对象不支持‘flat’属性或方法

手动将方法flat代码实现后添加到Array.prototype中

babelAdd.js

(function ArrayAdd(){
	if(Array.prototype.flat instanceof Function) {
		console.log('Array.protype.flat IS Exist')
	}else {
		Array.prototype.flat = function(i = 1){
			var RES = [];
			var ii = 0;
			(function f(arr, ii){
				var arr = JSON.parse(JSON.stringfy(arr));
				for(let j = 0; j < arr.length; j++){
					if(Array.isArray(arr[j]) && ii < i){
						f(arr[j], ii+1);
					}else {
						RES.push(arr[j]);
					}
				}
			})(this, 0);
			return RES;
		}
	}	
})()

main.js

import './babelAdd'

5. IE浏览器折行失效，同时希望超过三行省略

正确写法：
js控制字数

         if (item.noticeTitle.length > 30) {
           return {
             ...item,
             noticeTitle: item.noticeTitle.slice(0, 30) + '...'
           }
         } else{
           return item
         }

css控制折行

     .tit{
       width: 100%;
       height: auto;
       word-wrap:break-word;
       overflow:hidden;
     }

鸣谢：
vue项目如何兼容IE11？❤
vue项目打包后在IE报SCRIPT1006：缺少 ‘)’
vue项目在IE11白屏报错 SCRIPT1002： 语法错误
vue踩坑记录之ChunkLoadError
vue 懒加载组件chunk相对路径混乱问题
ES10-flat 兼容性处理(附代码 无脑cv)