vue项目在IE浏览器中的兼容性问题

笔记 专栏收录该内容
2 篇文章 0 订阅

1、安装babel-polyfill:

npm install babel-polyfill --save-dev
//在main.js中引入babel-polyfill:
import 'babel-polyfill'

2、安装es6-promise(为es6实现异步编程)

npm install es6-promise --save-dev
//在main.js中引入es6-promise
import 'es6-promise/auto'

注意:引入的方式有很多种,注意不要重复引入!!(我自己应该就是因为这个问题,自己折腾了很久)

如果IE浏览器报错:

[vuex] vuex requires a Promise polyfill in this browser

则说明es6-promise没有引入成功,或者是重复引入!!

然后IE会报如下错误
在这里插入图片描述
原因:node_modules 中的插件 webpack无法将es6转换成es5

解决方式:
在vue.config.js文件下的configureWebpack里加如下代码:(有的项目是在webpack.base.config.js里面,视自己的项目具体情况而定)

// 解决iview与IE浏览器的兼容性:
module: {
    rules: [
        // 'transform-runtime' 插件告诉 Babel
        // 要引用 runtime 来代替注入。
        {
            test: /\.m?js$/,
            include: [
                resolve('src'),
                resolve('test'),
                resolve('node_modules/webpack-dev-server/client'),
                resolve('static'),
                resolve('node_modules/resize-detector/esm'),
                resolve('node_modules/element-ui/src'),
                resolve('node_modules/element-ui/packages'),
                resolve('node_modules/tree-table-vue/lib'),
                resolve('node_modules/v-org-tree/dist'),
            ],
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }
    ]
},

遇到这个问题的时候在网上找了很多很多的资料,也看了很多的博客,都多多少少的给了我一些启发,此处就不一一列出了。由于各项目实际情况不一样,在遇到此问题时,可能要根据自己项目的情况做一些小的改动

  • 0
    点赞
  • 1
    评论
  • 2
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

柠檬百香

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值