Vue 2.0 兼容IE相关配置和问题

Vue 2.0 兼容IE相关配置和问题

在Vue项目中，使用IE浏览器访问会白屏，这问题应该是项目打包后没有由ES6转ES5语法造成，IE不兼容；
首先，项目中引入babel-polyfill

npm i --save babel-polyfill
或
yarn add babel-polyfill 

第一步：引入babel-polyfill

1.在main.js 引入 import ‘babel-polyfill’

import Vue from 'vue';
import 'babel-polyfill';

2.在vue.config.js中，在chainWebpack内添加以下代码，只需要引入一处即可

chainWebpack: (config) => {
	config.entry.app = ['babel-polyfill', './src/main.js']
	//或者 两个选择一个添加就行
    config.entry('main').add('babel-polyfill');
  },

注意：1和2两种引入方式选择一种引入就行，不让会冲突

第二步：在babel.config.js中设置entry

module.exports = {
  presets: [['@vue/app', {
      useBuiltIns: 'entry',
      polyfills: ['es6.promise', 'es6.symbol']
    }
  ]]
}

第三步：在项目中还引入了其他插件而该插件内部也存在ES6写法，则需要将这些插件的ES6转换成ES5，在vue.config.js中使用transpileDependencies直接将需要转换的插件放入

transpileDependencies: ['element-ui',"sm-crypto"]

报错问题解决

报错问题：{description: ““Promise”未定义”, message: ““Promise”未定义”, name: “ReferenceEr…”, number: -2146823279, stack: “ReferenceEr…”}

解决方法：如果使用了vuex，则在vuex的index.ts文件中也要 import “babel-polyfill”，最好放在 import Vuex from ‘vuex’ 的前面

import Vue from 'vue'
import 'babel-polyfill';