Vue项目在ie浏览器中显示空白的兼容性问题解决

问题：在ie浏览器中页面报错：

SCRIPT5022: SecurityError

小编也不知道原因是什么，小编是尝试了以下几种方式才显示出来，这里建议大家试试看。

1、下载软件包：@babel/polyfill

执行的命令为：npm install @babel/polyfill

2、在main.js文件中，第一行位置引入，注意一样要放在第一行。

import '@babel/polyfill'

如果不行的话，把最下面注释的内容也写上。

 

 

3、在vue.config.js文件中加入语句：

transpileDependencies:['*'],
chainWebpack:config =>{
    config.entry('main').add('babel-polyfill') //main.js是入口js文件 
}

 

 

4、在babel.config.js中写：

module.exports={
    presets:[
        [
           '@vue/app’,{
                useBuiltIns:'entry'
            }
        ]  
    ]  
}                

 

 

 

 

5、在.browserslistrc文件中写：

>1%
last 2 versions
not ie<=11

 

 

6、在ie浏览器中点击  设置 > Internet选项 > 安全  > 本地Intranet  >  站点 >  "取消全部勾选"  >确定

第六步骤中的方法好像不适合使用在项目中，当用户非常多的时候，不可能让每一个用户都配置一次。所以小编还是继续尝试解决方法。

终于改好后，小编遇到另一个问题就是，本地环境测试兼容性ie没有任何问题，但是上到集成环境后，ie又显示白屏。于是只好重新开始。

将项目恢复原样，项目不兼容的时候没有做任何配置，也没有下载babel-poyfill,也没有配置vue.config.js。仅仅是修改打包命令，在package.json中修改了对应的打包命令test，竟然神奇的好了.

ie在集成环境报错的时候package.json内容为：

 

 

修改后兼容没问题以后的package.json,当然也要讲对应的.env.test的名字换为.env.uocTest,并且将.env.uocTest页面中的NODE_ENV和VUE_APP_MODE换成对应的名字

package.json文件内容如下：

 

 .env.uocTest文件内容如下：

 

 然后部署到集成环境，竟然奇迹般的好了，有知道为什么的大神麻烦留言解答下~~~