1.安装babel-polyfill ==>npm install babel-polyfill
2.安装完毕之后在启动类main.js中的第一行导入==> import 'babel-polyfill'
3.在配置文件vue.config.js中配置configureWebpack信息，完整代码如下：
const path = require('path')
const resolve = dir => {return path.join(__dirname, dir)
}// 项目部署基础
// 默认情况下，我们假设你的应用将被部署在域的根目录下,
// 例如：https://www.my-app.com/
// 默认：'/'
// 如果您的应用程序部署在子路径中，则需要在这指定子路径
// 例如：https://www.foobar.com/my-app/
// 需要将它改为'/my-app/'
// iview-admin线上演示打包路径： https://file.iviewui.com/admin-dist/
const BASE_URL = process.env.NODE_ENV === 'production'? '/': '/'module.exports = {// Project deployment base// By default we assume your app will be deployed at the root of a domain,// e.g. https://www.my-app.com/// If your app is deployed at a sub-path, you will need to specify that// sub-path here. For example, if your app is deployed at// https://www.foobar.com/my-app/// then change this to '/my-app/'publicPath: BASE_URL,// tweak internal webpack configuration.// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md// 如果你不需要使用eslint，把lintOnSave设为false即可lintOnSave: true,chainWebpack: config => {config.resolve.alias.set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components')).set('_c', resolve('src/components'))},// 设为false打包时不生成.map文件productionSourceMap: false,// // 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串// devServer: {// // proxy: 'localhost:3000'// proxy: 'http://192.168.0.13:8080/'// }configureWebpack: {module: {rules: [// 'transform-runtime' 插件告诉 Babel// 要引用 runtime 来代替注入。{test: /\.m?js$/,include: [resolve('src'),resolve('test'),resolve('node_modules/webpack-dev-server/client'),resolve('node_modules/iview/src'),resolve('node_modules/tree-table-vue/lib'),resolve('node_modules/v-org-tree/dist'),],use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}}]}}
}4.bug修复
1.ie11 下 点击右上角全屏 图标后，再次点击不退出全屏bug：将src/components/main/components/fullscreen/fullscreen.vue 里的全屏事件监听事件名纠正为MSFullscreenChange即可正常监听事件变化，功能恢复正常。 具体代码如下
document.addEventListener('msfullscreenchange', () => {this.$emit('input', !this.value)this.$emit('on-change', !this.value)
})//更改为
document.addEventListener('MSFullscreenChange', () => {this.$emit('input', !this.value)this.$emit('on-change', !this.value)
})2.ie9下右侧内容下坠问题：在src/components/main/main.vue 添加 float:left 样式
<Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}"><side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList"><!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 --><div class="logo-con"><img v-show="!collapsed" :src="maxLogo" key="max-logo" /><img v-show="collapsed" :src="minLogo" key="min-logo" /></div></side-menu></Sider>//修改后<Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden',float:'left'}"><side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList"><!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 --><div class="logo-con"><img v-show="!collapsed" :src="maxLogo" key="max-logo" /><img v-show="collapsed" :src="minLogo" key="min-logo" /></div></side-menu>
</Sider>3.ie下其他报错处理代码，在src/view/main.js new Vue({})下方添加以下代码
/* eslint-disable no-new */
new Vue({el: '#app',router,i18n,store,render: h => h(App)
})
下面是需要添加内容////**
*作用：兼容dataset
*问题：[Vue warn]: Error in directive transfer-dom inserted hook: "TypeError: 无法获取未定义或 null 引用的属性“transfer”"
*说明：ie10及以下不支持dataset，以下代码处理兼容
* */
if (window.HTMLElement) {if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {Object.defineProperty(HTMLElement.prototype, 'dataset', {get: function () {var attributes = this.attributes; // 获取节点的所有属性var name = [];var value = []; // 定义两个数组保存属性名和属性值var obj = {}; // 定义一个空对象for (var i = 0; i < attributes.length; i++) { // 遍历节点的所有属性if (attributes[i].nodeName.slice(0, 5) === 'data-') { // 如果属性名的前面5个字符符合"data-"// 取出属性名的"data-"的后面的字符串放入name数组中name.push(attributes[i].nodeName.slice(5));// 取出对应的属性值放入value数组中value.push(attributes[i].nodeValue);}}for (var j = 0; j < name.length; j++) { // 遍历name和value数组obj[name[j]] = value[j]; // 将属性名和属性值保存到obj中}return obj; // 返回对象},});}
}/***作用：兼容requestAnimationFrame（ie9）*问题：*说明：ie9是不支持requestAnimationFrame的，以下代码处理兼容* */
(function () {var lastTime = 0;var vendors = ['ms', 'moz', 'webkit', 'o'];for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||window[vendors[x] + 'CancelRequestAnimationFrame'];}if (!window.requestAnimationFrame) {window.requestAnimationFrame = function (callback, element) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16 - (currTime - lastTime));var id = window.setTimeout(function () { callback(currTime + timeToCall); },timeToCall);lastTime = currTime + timeToCall;return id;};}if (!window.cancelAnimationFrame) {window.cancelAnimationFrame = function (id) {clearTimeout(id);};}
}());/***作用：兼容classList（ie9）*错误信息： 无法获取未定义或 null 引用的属性“add”/ 无法获取未定义或 null 引用的属性“remove”*说明：ie9以下代码处理兼容* */
if (!('classList' in document.documentElement)) {Object.defineProperty(HTMLElement.prototype, 'classList', {get: function () {var self = this;function update(fn) {return function (value) {var classes = self.className.split(/s+/g);var index = classes.indexOf(value);fn(classes, index, value);self.className = classes.join(' ');};}return {add: update(function (classes, index, value) {if (!~index) classes.push(value);}),remove: update(function (classes, index) {if (~index) classes.splice(index, 1);}),toggle: update(function (classes, index, value) {if (~index) { classes.splice(index, 1); } else { classes.push(value); }}),contains: function (value) {return !!~self.className.split(/s+/g).indexOf(value);},item: function (i) {return self.className.split(/s+/g)[i] || null;},};},});
}4.ie下报vue {description: "无法获取未定义或 nu...", message: "无法获取未定义或 nu...", name: "TypeError", number:-21468232
解决方式:清除浏览器缓存即可，快捷键 Ctrl + Shift +Delete
5.兼容ie9
因为 IE 都不支持 promise, 解决方案:
npm install es6-promise
// 在 main.js 引入即可
// ES6的polyfill
require("es6-promise").polyfill();