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

艰难路程

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

此博文用于记录解决问题，用于参考。

解决办法

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

需要下载对应的支持包

// 安装 babel-polyfillnpm 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

收工跑路