Vue项目多浏览器兼容(主要是IE、360)

第一次做PC端项目，花了两天时间才将项目可以在各浏览器上运行

搭建项目过程就不说了，项目正常在Chrome、Firefox、搜狗下运行，但是在ie、360浏览器显示空白，话不多说，流程如下：

首先安装babel-polyfill

npm install --save-dev babel-polyfill

然后在babel.config.js修改presets，内容如下：     

presets: [
    // '@vue/cli-plugin-babel/preset'
    '@vue/app',
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry'
      }
    ]
  ],
//我这是cli5的，或者如下
//presets: [["@vue/app", {useBuiltIns: "entry",}]],// 此为vue/cli3
//presets: [["@vue/cli-plugin-babel/preset", {useBuiltIns: "entry",}]],// 此为vue/cli4

main.js的第一行引入：注意是首行

import 'babel-polyfill';

还有记得在babel.config.js添加sourceType，内容如下：

presets: [
    // '@vue/cli-plugin-babel/preset'
    '@vue/app',
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry'
      }
    ]
 ],
//位置和上面平级
 sourceType: 'unambiguous',

为了使编译好的程序能在大多数浏览器下运行。webpack里面有一个编译器叫Babel，负责把ES6的语言转化为commonJS以兼容绝大多数浏览器。当你混用这两个语法的时候你可以使用babel的commonJS模式帮你把import编译成require。

  然而第二种情况就是你要使用某个这个插件的时候，同时你又在某个commonJS写的文件里使用这个插件时，babel会默认你这个文件是ES6的文件，然后就使用import导入了这个插件，从而产生了和第一种情况一样的混用错误。解决方法是在babel.config.js里配置unambiguous设置，让babel和webpack一样严格区分commonJS文件和ES6文件。

.browserslistrc文件内：

> 1%
last 2 versions
not ie <= 8

以上基本就可以了，如何还不行就是第三方插件的问题了

一般报这种语法错误，点击查看具体哪个插件问题

主要看框内最后是哪个插件引起的错误，哪个有问题就放哪个，下面截图是示例

找到后在vue.config.js中加入：里面的都是一个个插件名，注意写的是插件名

//这里是我报错后加入进来的插件
transpileDependencies: [
    'sock-js',
    'sockjs-client',
    'socket.io-client',
    'engine.io-client',
    'engine.io-parser',
    'socket.io-parser',
    'vue-socket.io'
  ],

还有一种是本地环境正常，但生产环境仍旧白屏(这种情况我没有出现过)

这是发现引入一个多语言文件时，JSON没有使用合适的逗号导致，如下：

逗号去掉后，就可以了。

请注意：每次修改完配置文件要用前，必须重新运行项目（npm run dev）

最后可以看看下面这三个的，对我帮助很大

vue报错Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘_浩星的博客-CSDN博客

vue系列之----项目在ie浏览器中空白_hyduan200的博客-CSDN博客_vue在ie下页面空白

vue 项目、vue-admin-ement项目 在IE、360兼容模式下为空白界面（最新解决方法、亲测有效）_进击的yuan人的博客-CSDN博客

解决vue项目在ie和360兼容模式下显示空白页问题_爱奋斗的小程的博客-CSDN博客_vue兼容360兼容模式