vue项目在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浏览器缓存

输入网址测试

注意事项

• 不要使用cnpm安装以上插件,太坑了！！
• 如果执行npm install -g webapck 命令时，报错，不要惊慌

•  如果按照以上步骤，页面仍然空白，F12查看报错信息，点进去

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