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'
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue项目出现ERESOLVE could not resolve问题及解决
这篇文章主要介绍了vue项目出现ERESOLVE could not resolve问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue computed的缓存实现原理，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-04-04
watch函数用于侦听某个值的变化,当该值发生改变后,触发对应的处理逻辑,本文将给大家介绍了Vue3中watch监听的五种情况,文中通过代码示例讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-03-03
Vue+ElementUI表格状态区分,row-class-name属性详解
这篇文章主要介绍了Vue+ElementUI表格状态区分,row-class-name属性,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
echarts 使用formatter 修改鼠标悬浮事件信息操作
这篇文章主要介绍了echarts 使用formatter 修改鼠标悬浮事件信息操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了浅谈Vue SSR中的Bundle的具有使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
今天小编就为大家分享一篇Vue-router的使用和出现空白页,路由对象属性详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue实现监听localstorage值变化，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue-cli3+ts+webpack实现多入口多出口功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了Vue中component标签解决项目组件化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论