VUE360浏览器访问空白的问题

最新推荐文章于 2024-06-17 17:17:34 发布
最新推荐文章于 2024-06-17 17:17:34 发布
阅读量3k 收藏
点赞数 4
分类专栏： Vue+Elemet UI 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yangwenjie12/article/details/89531108
版权
本文描述了VUE项目在360浏览器兼容模式下出现空白页面的问题及解决方案。问题在于VUE不支持ie7和ie8，360浏览器的兼容模式使用了旧版IE内核，导致页面无法正确渲染。通过切换至360极速模式，可正常访问线上项目。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

VUE项目在本地npm run dev 后用360浏览器访问127.0.0.1:8080 可以正常访问。火狐谷歌浏览器都是没问题的。

然后通过npm run build 将构建的dist 放到Linux服务器的nginx下，用360浏览器不正常，一片空白。用火狐谷歌浏览器都是没问题的。

问题原因：有个知识点应该都知道——VUE不支持ie7和ie8。验证方法是用360的极速模式可以正常访问线上的项目。问题一开始的原因是，我本地的用360访问时他默认是用360极速模式访问的，线上的项目访问时默认是用360的兼容模式访问的，他妈的，还有这种问题，害我白白查了好几个小时。

话不多说，上个图说明一下。

如图，可以在上面闪电处点击选择模式。希望有所帮助！

Vue3 - 实现网页白屏加载期间自动插入 “自定义“ 加载 loading 动画，每当页面打开加载时就会自动显示动画或图片文件（全局注入网站首屏加载等待动画，利用动态图或动画解决长时间白屏的问题）
王二红
09-15 3399
vue3vite网站项目，vue3加载动画，vue3网站加载时怎么加入动画，vue3实现网页首屏加载动画、页面内请求数据加载loading，vue3实现loading加载动画，前端vue3加载中页面动画弹跳动画，Vue3防止白屏添加首屏动画的实例，vue3项目加载之前添加加载动画，Vue3首屏加载等待动画，vue3首屏添加加载动画，vue3页面加载动画，vue3首次加载页面时白屏怎么加入加载动画图片，vue3页面加载时怎么用一张gif图做加载动画，vue3如何显示页面白屏加动画过渡，Vue3设置全局loa
vue3 seo prerender-spa-plugin swiper6 vue-router4 build 打包空白 图片压缩
qq_37011713的博客
08-31 398
版本依赖 vue3、vue-cli4、 vue-router4、swiper6、prerender-spa-plugin3、image-webpack-loader7 "dependencies": { "core-js": "^3.6.5", "image-webpack-loader": "^7.0.1", "prerender-spa-plugin": "^3.4.0", "swiper": "^6.8.4", "vue": "^3.0.0", "
vue项目踩坑之安卓4,5，ios9页面空白
kayla_wang的博客
05-18 9386
最近在用vue做项目，项目在安卓4,5，ios9页面显示空白，问题解决跟大家分享一下安卓4,5，ios9页面空白原因：低版本不支持es6，需要将es6编译成es5具体解决方法1.npm install --save-dev babel-preset-es2015（安装ES2015转码规则）2.npm install --save-dev babel-polyfill3.mian.js 中引用 im...
vue项目打包后页面出现空白
热门推荐
qq_24882601的博客
05-23 1万+
相信很多刚刚接触vue的伙伴会遇到这样的问题，就是说vue项目在开发环境下一切正常，但是打包之后，打开index.html页面却是一片空白，打开控制台发现这样的错误 出现这种情况要分两个处理方式（vue-cli2和vue-cli3），先说vue-cli2； 首先找到config/index.js文件，将assetPublicPath的路径改为“./”即可， vue-cli3...
vue项目，在手机上预览一直空白
manda Liu的博客
06-10 1532
因为是用vue开发的移动端项目，需要在手机预览页面效果，于是将项目中config/index中的host配置成本机ip，在电脑上运行预览完全没问题，但是在手机怎么都打不开，脑壳超级疼，后来终于找到了解决办法 config/inidex文件中配置前： host: 'host', // can be overwritten by process.env.HOST 配置后： host: '10.1.3.27', // can be overwritten by process.env.HOST 解决办法 打开
vue 2.+ 创建的项目在ie或者360极速浏览器上运行 页面空白 解决方案
11-05 926
问题： vue2.+的项目在360急速浏览器上运行空白，结果输出360极速浏览器内核是ie11 -.-!!! 难怪！！！ 简单直接一点： 在项目的index.html里面直接引入： <script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script> ...
vue打包后华为手机自带浏览器访问空白
快乐的小海绵
07-26 2451
首先肯定是有哪块代码报错了，我们的项目查找出以下二个原因 1、jquery要引入原生的js，不要用vue自带的jquery库 2、不支持vue-viewload组件 貌似就是vue的某些组件和库不支持，才导致的华为浏览器访问网站空白...
vue项目在ie、360兼容模式页面显示空白问题
allen_csdns的博客
11-26 1698
vue项目中，出现在ie与360兼容模式下打开页面呈现空白问题，如下： 控制台报main.js中语法错误~ 上网搜了一下，大部分解决方案是在webpack配置中与main.js中引入babel-polyfill进行处理 由于项目是使用webpack.config.js手动搭建，并未使用vue-cli脚手架，引入babel-polyfill之后在ie、360浏览器中仍然是显示空白。。。 关注我...
vue 项目兼容IE浏览器和360浏览器
ishell1021的博客
06-30 1898
vue项目在IE浏览器和360兼容模式显示空白解决方法 1.安装babel-polyfill 模拟ES2015以上的环境，主要用于对ES6新语法不支持的浏览器. 安装:npminstallbabel-polyfill--save-dev 配置: main.js在最顶部添加,确保全面加载 import'babel-polyfill' webpack.base.conf.js中 app入口添加"babel-polyfi...
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
10-14
在开发Vue项目时，遇到IE11浏览器白屏并报出`SCRIPT1002: 语法错误`的问题，通常是由于IE11不支持ES6语法导致的。Vue.js自身和许多现代JavaScript库广泛使用了ES6特性，而IE11并不完全支持这些新特性。以下是一些...
手机访问电脑打开的vue项目
v_111的博客
04-14 4803
1，将手机连接到与电脑相同的WIFI2，更改vue项目config文件夹下的index.js的host地址。默认为“localhost”，更改为自己电脑的ip地址。3,npm run dev 运行项目，复制路径生成二维码。手机扫一扫即可。...
新版vue-cli，部分手机浏览器访问白屏
我叫陈小皮。
08-02 6194
改变 config/index.js 的devtool 无法兼容的浏览器有：qq浏览器、UC浏览器、华为默认浏览器、钉钉应用内部浏览器
解决vue项目在ie和360兼容模式下显示空白页问题
m0_59360516的博客
08-03 3338
记一次bug解决，项目不复杂，是一个基于vue-cli3搭建的pc端项目，之前开发都是在谷歌浏览器上运行的，但在开发进入到后半段，经理说，项目需要在360兼容模式下展示，这时候发现项目在360兼容模式下显示空白页，并且没有任何报错，第一次遇到这种问题，于是就去网上搜索找答案。...
vue项目在360兼容模式下无法打开
Koini
10-13 1739
360兼容模式
360和360极速浏览器无法打开vue项目的问题
weixin_43239880的博客
02-22 5964
360和360极速浏览器无法打开vue项目的问题 vue项目开发之后，使用360和360极速浏览器打开项目后可能会发现，自己的项目进不去了，或者F12发现有报错。 原因：360和360极速浏览器有极速模式（webkit内核）和兼容模式（IE内核）两种，因为360打开时使用的是兼容模式，但是项目又没有兼容IE（Trident）内核，导致了项目打不开。 解决方案1（比较麻烦）：当然你可以引入babel-polyfill或者core-js来解决IE兼容问题，但是这样子比较麻烦。如果你的项目本身就是不需要兼容IE的
Vite+Vue3+ElmentPlus在部分浏览器(360浏览器)上弹窗无法正常显示的问题
最新发布
weixin_52830464的博客
06-17 352
解决办法：vite.config.js中配置css的编译目标，直接设置成主流浏览器版本比如chrome83；完美解决问题~
vue打包之后谷歌浏览器可以正常打开，而其它一些浏览器360等无法正常打开
Lou_Lan的博客
09-24 5871
一. 问题描述   vue再开发阶段一切都是正常的，都是没有什么毛病的，后来昨天测试这个打包nginx部署，发现了一个问题，那就是部署完成之后，我使用谷歌浏览器打开地址完全可以正常的打开，但是使用360，edge，百度等浏览器进行打开的时候发现要么是无法打开报错，要么就是压根打不开。我心中亿万个草泥马就飞过去了。   错误是这个样子的： 二. 原因分析   既然不行肯定得找原因，后来经过查找网络...
vue项目在IE浏览器和360浏览器的打开空白屏
qq_41609134的博客
12-19 844
1、样式问题 如果你的样式原本好好的，安装完依赖之后发现css路径有问题或者样式不对劲的，说明重装的依赖版本不对，手动更改 package.json 里面 dependencies => element-ui 版本号再次安装，样式恢复，问题解决。 2、兼容问题 vue 项目在谷歌浏览器和火狐浏览器打开都是正常显示，但在IE浏览器和360浏览器兼容模式下打开空白屏，打开调试发现报错，报的...
Vue项目多浏览器兼容(主要是IE、360)
weixin_44086918的博客
09-22 6760
然而第二种情况就是你要使用某个这个插件的时候，同时你又在某个commonJS写的文件里使用这个插件时，babel会默认你这个文件是ES6的文件，然后就使用import导入了这个插件，从而产生了和第一种情况一样的混用错误。解决方法是在babel.config.js里配置unambiguous设置，让babel和webpack一样严格区分commonJS文件和ES6文件。找到后在vue.config.js中加入：里面的都是一个个插件名，注意写的是插件名。以上基本就可以了，如何还不行就是第三方插件的问题了。
Vue webapp转原生APP：HBulider打包教程
在调试过程中，如果遇到Vue项目加载为空白的情况，检查config下的index.js文件，特别是bulid模块中的输出路径设置。确保Webpack打包后的文件路径与index.html中引用的脚本路径一致，否则应用将无法正常加载。 通过...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值