vue2 + vue-cli3+ 设置兼容IE10+ 避坑指南

  1. 使用vue2+ vue-cli3+ 搭建vue项目。
  2. 查看package.json是否有安装有安装core-js,如没有的话就安装一下。
    使用:npm i core-js
  3. 配置main.js,在最前面新增引入

// IE10兼容 with polyfills
import 'core-js/stable'
import 'regenerator-runtime/runtime'

  1. 设置:babel.config.js。如没有该文件,则新建一个,配置如下:

module.exports = {
  presets: [
    [
    '@vue/cli-plugin-babel/preset',
    {
      useBuiltIns: 'entry',
      corejs: 3
    }
    ]
  ],
  plugins: [ ]
}

  1. 设置:vue.config.js,如没有该文件,则新建一个,配置如下:

module.exports = {
    // 添加transpileDependencies配置属性,按需添加需要编码的内容
    transpileDependencies: ['*'],
}

这个配置后,能解决IE上这个报错,如图:

vue2 + vue-cli3+ 设置兼容IE10+ 避坑指南

  1. 安装axios时,注意axios的版本号。
    当版本号过高时候,会出现如下所示错误,从而导致页面加载为空:

    vue2 + vue-cli3+ 设置兼容IE10+ 避坑指南

    开始我安装的是: “axios”: “^1.1.2″,
    后来改成”axios”: “^0.19.2” 版本就解决了这个问题。
    安装命令:

npm i axios@0.19.2 -D

© 版权声明
THE END
如果内容对您有所帮助,就支持一下吧!
点赞0 分享
评论 共1条

请登录后发表评论