vue项目在IE浏览器中访问空白问题

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

问题原因

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中白屏不能使用的问题解决思路彻底完毕。

以上是 vue项目在IE浏览器中访问空白问题 的全部内容， 来源链接： utcz.com/z/377618.html

回到顶部