196  
查询码:00000125
vue项目在IE浏览器中访问空白问题
作者: 陈婉 于 2020年09月01日 发布在分类 / 人防组 / 人防前端 下,并于 2020年09月02日 编辑
vue iview-admin ie 浏览器兼容

问题原因

IE9-IE11 不兼容ES6语法

解决方案:

安装“babel-loader”

解决流程

停止项目运行

删除项目中node_modules

执行命令

npm install
npm install -g webpack
npm install --save-dev babel-loader babel-core babel-preset-env

修改vue.config.js配置文件

在vue.config.js中的module.exports里添加以下代码:

configureWebpack: {

    module: {
      rules: [
        // 'transform-runtime' 插件告訴 Babel
        // 要引用 runtime 來代替注入。
        {
          test: /\.m?js$/,
          // exclude用上面配置的話,默認是過濾不編譯node_modules 路徑下的文件
          // exclude: /(node_modules|bower_components)/,
          // include 指定需要編譯的文件路徑
          include: [
            resolve('src'),
            resolve('node_modules/tree-table-vue/lib'),
            resolve('node_modules/v-org-tree/dist'),
            resolve('node_modules/iview/src/locale'),
           // 下面三个根据需要自行添加
            resolve('node_modules/rview-c/dist'),
            resolve('node_modules/swiper/js'),
            resolve('node_modules/dom7/dist')
          ],
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  }

重新运行项目

npm run dev

清空IE浏览器缓存

输入网址测试

注意事项


  1. 不要使用cnpm安装以上插件,太坑了!!!!
  2. 如果执行npm install -g webapck 命令时,报错,不要惊慌粘贴图片
  3.  如果按照以上步骤,页面仍然空白,F12查看报错信息,点进去粘贴图片 粘贴图片


上图中就是浏览器报的具体哪一个插件没有编译成es5导致报错,那么这时可以看到这个错误是strict-uri-encode,这个依赖没有编译,这时将这个包名strict-uri-encode写进vue.config.js中的configureWebpack里去,然后重新启动项目,那么这个错误就不会再报了。然后继续在ie中打开,看看还有什么其他依赖报错没有,至此iview-admin在ie中白屏不能使用的问题解决思路彻底完毕。





 推荐知识

 历史版本

修改日期 修改人 备注
2020-09-02 11:15:54[当前版本] 陈婉 其他原因...
2020-09-02 10:05:41 陈婉 格式调整
2020-09-02 10:01:12 陈婉 格式调整
2020-09-02 10:00:14 陈婉 格式调整

 附件

附件类型

JPGJPG

知识分享平台 -V 4.8.7 -wcp