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

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

SCRIPT5022: SecurityError

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

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

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

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

1
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文件内容如下:

 

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

 

posted @   Evident  阅读(1888)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
点击右上角即可分享
微信分享提示