美文网首页vuevuereact & vue & angular
vue2 + vue-cli3+ 设置兼容IE10+ 避坑指南

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

作者: 林玲玲的笔记 | 来源:发表于2022-10-17 18:46 被阅读0次
    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上这个报错,如图:


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


      1665997237166.png

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

    npm i axios@0.19.2 -D
    

    相关文章

      网友评论

        本文标题:vue2 + vue-cli3+ 设置兼容IE10+ 避坑指南

        本文链接:https://www.haomeiwen.com/subject/bardzrtx.html