vue项目兼容ie

vue项目需要兼容ie，一开始我在360兼容模式下，登录页都出不来。后来无意看到个帖子，按着步骤来，很好解决了。vue项目系统兼容IE浏览器问题以及解决方案_vue兼容ie浏览器解决方案_wodomXQ的博客-CSDN博客

 以下可以忽略，是我自己的记录而已。

 兼容问题解决办法：

1.安装插件： 

      1.npm install --save babel-polyfill

      2.npm install es6-promise

      3.npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

2.配置文件中的相关配置

     1.vue.config.js   

       chainWebpack中添加如下配置

 config.entry.app = ["babel-polyfill", "./src/main.js"];
    config.module.rule('compile')
      .test(/\.js$/)
      .include
      .add(resolve('src'))
      .add(resolve('test'))
      .add(resolve('node_modules/webpack-dev-server/client'))
      .add(resolve('node_modules'))
      .end()
      .use('babel')
      .loader('babel-loader')
      .options({
        presets: [
          ['@babel/preset-env', {
            modules: false
          }]
        ]
      });

   2.babel.config.js

  添加sourceType和useBuiltIns   配置插件： transform-es2015-modules-commonjs

module.exports = {
  presets: [
    // '@vue/cli-plugin-babel/preset', //文件原始内容
    ['@vue/app', {
      useBuiltIns: 'entry',             //添加的内容
    }]
  ],
  sourceType: 'unambiguous'，
'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
      'plugins': ['dynamic-import-node',"transform-es2015-modules-commonjs"]
    }
  },
}

3.main.js

 一定要放到最顶部

import 'babel-polyfill'
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill()
Es6Promise.polyfill()Plain Text

3.说明

问题：
vue项目在IE浏览器上运行时会出现兼容性问题：JavaScript语法报错，css样式错乱。原因是在IE（以IE11为例）浏览器下，部分js的写法需要改变，部分样式在IE浏览器上不支持，以及一些IE浏览器特有的问题。

vue 只兼容ie8以上版本；

IE 不兼容 axios的promiss对象;

IE 不兼容es6语法；

一、关于babel-polyfill

1、说明：This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool. This polyfill is automatically loaded when using babel-node.（模拟ES2015以上的环境，主要用于对ES6新语法不支持的浏览器）；

二、关于es6-promise

1、说明：若在项目中使用了ES6 promise对象，它在Chrome、Safari浏览器下可以正常运行，但在360兼容模式、IE内核中不支持；

在main.js中加入require(‘es6-promise’).polyfill()，用于在node或浏览器中支持ES6 与CommonJS。

因为项目中require和import混用的原因，在做了IE兼容之后打包会出现问题，会报以下错误：  Cannot assign to read only property 'exports' of object '#<Object>'此时就需要安装babel-plugin-transform-es2015-modules-commonjs插件来解决报错