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';