艰难路程

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

解决办法

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

需要下载对应的支持包

//  安装 babel-polyfill
npm install --save babel-polyfill

//  安装 es6-promise 
//  这里主要是为了解决代码es6新特性兼容问题
npm install es6-promise --save

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兼容模式下空白页面，并提示语法错误的原因

艰难路程

解决办法