解决vue项目在ie、360兼容模式下空白页面问题

您所在的位置：网站首页 › 动漫之家下载漫画文件夹 › 解决vue项目在ie、360兼容模式下空白页面问题

解决vue项目在ie、360兼容模式下空白页面问题

2023-08-11 20:47| 来源: 网络整理| 查看: 265

完美解决vue项目在ie、360兼容模式下空白页面，并提示语法错误的原因艰难路程解决办法

艰难路程

事实上，很多人在做项目的过程中很多存在同一个问题，于是去百度了，但是用同样的解决方法不一定就能解决问题。本人菜鸟一枚，以至于看了很多博文，一个一个去试过，结果很多都是因为项目的差异性导致了不成功。此博文用于记录解决问题，用于参考。

解决办法

总所周知，ie和360兼容模式是神坑！这俩玩意不合群还很傲娇，常常是别的浏览器能正常，它俩就对你爱理不理，下面提供一些棍棒教育的方法：

需要下载对应的支持包 // 安装 babel-polyfill npm install --save babel-polyfill // 安装 es6-promise // 这里主要是为了解决代码es6新特性兼容问题 npm install es6-promise --save 引用在根目录下main.js引入 import 'babel-polyfill' import Es6Promise from 'es6-promise' require('es6-promise').polyfill() Es6Promise.polyfill() 在根目录下的babel.config.js添加如下代码：声明：一般你上面导入babel-polyfill这个包，都会自动创建babel.config.js这个文件，如果没有就手动创建，再替换掉里面的原有代码哈。 module.exports = { presets: [ '@vue/app', [ '@babel/preset-env', { useBuiltIns: 'entry' } ] ], } 配置vue.config.js 同样是在根目录下，当然这里有差异性，有的博文是在webpack.base.conf.js下面配置的，看自己的项目灵活添加咯。 4-1.在configureWebpack的代码块里面引入如下配置： // 解决iview与IE浏览器的兼容性： module: { rules: [ // 'transform-runtime' 插件告诉 Babel // 要引用 runtime 来代替注入。 { test: /\.m?js$/, // exclude用上面配置的話，默认过滤不编译node_modules 下的文件 // include 指定需要编译的文件路径 include: [ // 根据需求导入 , (如有elment的就可以引入，没有就没必要了) resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('static'), resolve('node_modules/resize-detector/esm'), resolve('node_modules/element-ui/src'), resolve('node_modules/element-ui/packages'), resolve('node_modules/tree-table-vue/lib'), resolve('node_modules/v-org-tree/dist'), ], use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }

4-2.在configureWebpack的代码块里面的chainWebpack代码块引入如下配置：

chainWebpack(config)这里有差异，有些是chainWebpack：config => 原因可能是vue版本不一样~ chainWebpack(config) { config.entry('main').add('babel-polyfill') }

重启重启项目：npm run dev

收工跑路

【本文地址】

解决vue项目在ie、360兼容模式下空白页面问题

解决vue项目在ie、360兼容模式下空白页面问题

今日新闻

推荐新闻