vue-cli3项目在IE浏览器打开兼容问题及解决

vue-cli3在IE浏览器打开兼容问题

问题描述

vue打包的项目在ie浏览器上，不能打开。找了一天的解决方案，解决一个又报一个兼容错误，一步一坑一步一填，终于解决了问题🙂。我们需要了解的ie浏览器支持版本大于ie8。

方案

第一步：安装babel-polyfill依赖

解决es6语法的兼容问题

npm install babel-polyfill --save-dev

在main.js 文件中引用这个库，import ‘babel-polyfill’

第二步：安装es6-promise依赖

走了第一步，又出现了一个坑，ie浏览器不认识promise。需要我们在添加下面的依赖。

npm install es6-promise --save-dev

在main.js文件引入下面的内容。 

import promise from ‘es6-promise'
promise.polyfill()

第三步：解决引用第三方库IE浏览器不识别

项目中引入iview和我们公司自己样式库，部分语法在ie浏览器上不能识别报错。

在项目的根目录中找到vue.config.js文件，修改webpack的配置。

 chainWebpack: config => {
   config.module.rule('iview')
     .test(/\.js$/)
     .use('babel')
     .loader('babel-loader')
     .end()
 }

vue-cli 在IE下兼容设置

首先看 vue 官网上给出的 vue-cli 在浏览器中的兼容性，图中表示是兼容 IE 9的，但是在IE9中打开项目会发现一片空白。

解决办法如下

第一步、安装 babel-polyfill

npm install --save babel-polyfill

第二步、在 main.js 中的最前面引入 babel-polyfill

import 'babel-polyfill';

第四步、修改 config 中的 webpack.base.conf.js 中的编译配置

entry: {
	// app: './src/main.js',
	app: ["babel-polyfill", "./src/main.js"]
}

如果你只用到了 axios 只需要对 promise 进行兼容，可以只用 es6-promise

npm install es6-promise --save

在 main.js 中的最前面引入

import 'es6-promise/auto';

完成以上配置，IE 9 兼容就完成了。

全局引入 babel-polyfill 有 90KB 以上，

也可以不安装 babel-polyfill，使用以下方式：在 index.heml 页面最前面添加以下代码。

<script src="https://cdn.staticfile.org/babel-polyfill/6.2.4/polyfill.min.js"></script>

然后修改 webpack.base.conf.js

externals: {
	'vue': 'Vue',
	'element-ui': 'ELEMENT',
	'vue-router': 'VueRouter',
	'vuex': 'Vuex',
	'echarts': 'echarts',
	'babel-polyfill': 'window'
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持阿兔在线工具。