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文件内容如下:
然后部署到集成环境,竟然奇迹般的好了,有知道为什么的大神麻烦留言解答下~~~
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用