vue2.0 页面在华为自带浏览器里无法打开。

最新推荐文章于 2022-09-05 16:57:43 发布

crli

最新推荐文章于 2022-09-05 16:57:43 发布

阅读量2.5k

点赞数

分类专栏： JavaScript vue 兼容性

本文链接：https://blog.csdn.net/liningaa/article/details/73459470

版权

JavaScript 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

兼容性

1 篇文章 0 订阅

订阅专栏

因为华为手机内置的浏览器内核版本太低！

解决方案1：

npm install --save -dev babel-polyfill
在你的主入口文件app.js中import 'babel-polyfill'即可

解决方案2：
也就是使用cdn的资源，以js的文件加入到html页面：

加一个https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

crli

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

基于vue-cli2.0的华为商城项目源码.zip

08-26

基于vue-cli2.0的华为商城项目源码.zip基于vue-cli2.0的华为商城项目源码.zip基于vue-cli2.0的华为商城项目源码.zip基于vue-cli2.0的华为商城项目源码.zip基于vue-cli2.0的华为商城项目源码.zip基于vue-cli2.0的华为...

vue项目通过npm安装swiper后在.vue文件中import，pc端和微信端打开都是正常的，但是跑到华为手机页面无法跳转

yyf326的博客

05-05

2359

问题 vue项目在安卓手机测试时，某个页面无法跳转，报错uncaught syntaxError: 方法检查发现是某个组件无法跳转，该组件打包好的js文件（dist文件夹中）在小米note手机无法识别，所以无法跳转到该页面经过测试发现，之前.vue文件中引用swiper是使用import Swiper from 'swiper';然后实际引用的是node_module/swiper/dist/...

参与评论您还未登录，请先登录后发表或查看评论

Vue2.0 之自带浏览器里无法打开（兼容处理） - 解决方案

大熊的博客

05-10

6655

Vue 之 android内嵌H5页面不显示出现这个问题，原因有很多首先，别急，请看下面的推荐方案：1、找个android真机测试下（机型版本为4.4以上），真机联调测试（如果不知道怎么联调，那么请看这里：Android真机 - 联调chrome调试）2、如果报报错 vuex requires a Promise polyfill in this browser.那么，就是兼容性不够好，请看下面...

关于低版本安卓（4.X版本），华为等手机下，vue.js页面失效的问题

hello world.

09-20

2320

关于低版本安卓（4.X版本），华为等手机下，vue.js页面失效的问题将页面在IE浏览器中打开将页面在IE浏览器中打开接着打开F12，把所有的报错解决即可，并且需要把页面内的ES6转换为ES5。 ...

vue手机浏览器里无法打开（主要针对华为）

settingSun66的博客

01-27

1万+

1.首先确定手机安卓系统4.0以上。 2.在页面引入https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js 在页面处理兼容问题。 3.单页面或者web-view 尽量不要用es6进行代码开发，用了也没事找个网址进行es6转es5（https://babeljs.io/repl/）。本次遇到的问题是老板的华为手机自带浏览器

Vue3学习-企微浏览器兼容问题

tglsaturn的专栏

05-28

1289

背景：公司需要做一个企微H5应用，选型是vue3，于是使用vue-cli@4搭建一个vue3项目（vue3+router+vuex+sass+linter），搭建完毕后，增加了vue-i18n做国际化，本地调试正常，于是部署到测试环境，使用手机访问企微应用是正常的，但是使用企微PC版访问却是一片空白 ...

vue cdn引入一段时间后在某些浏览器报错

hello world

06-09

498

之前为了缩小打包体积，一些东西使用cdn引入，过了一段时间项目在某些浏览器打不开，打开控制台，发现cdn资源错误原因：cdn引入版本与项目版本不符项目中的版本应该是自己更新的，我自己没手动更新过，也可能是领导更的之前用的vue版本是2.5.10版本，cdn引入的也是，现在项目里vue是2.6.11（在package.json查看项目中的版本）更新cdn的版本即可 ...

基于Vue3.0+Springboot华为商城购物网站设计

10-17

开发技术环境： Idea + Vscode + Mysql + Springboot + vue3.0 基于vue的购物商城网站分为前台功能和后台管理功能，前台功能主要包括基础功能模块、订单管理模块、商品列表模块、个人中心模块。基础功能包括用户...

华为云Windows Server 2019 数据中心版服务器部署vue项目.docx

07-02

在浏览器中输入自己的公网 IP 加 80 端口号，如果内容显示成功，则表明在服务器上搭建自己的网站搭建成功了。知识点： * 如何测试服务器 * 如何输入公网 IP 和端口号 * 如何确保网站搭建成功

基于Vue3.0+Springboot华为商城购物网站设计源码.zip

热门推荐

Write less，do more

06-03

1万+

企业微信接入第三方应用（以服务商身份） 1.确认我们是第三方应用开发还是企业内部开发选项（对后面有很大区别）首先，要明确两个概念，就是微信和企业微信不是一个东西（虽然有些信息互通）、企业微信应用和服务商的第三方应用也不是一个东西（虽然也有些接口可以调用），企业内部开发指的是开发某个企业自己用的应用，而第三方应用开发指的就是开发者作为服务商开发第三方应用，让其他企业（使用企业微信的人）安装你（服务商）开发的应用。这次主要记录作为服务商第三方应用的开发过程 2.需要的准备：注册两个企业，一个作为应用的服

华为浏览器工具箱 html修改,华为手机修改浏览器模式为电脑浏览模式的方法

weixin_39997194的博客

06-05

2034

华为手机如何修改浏览器模式为电脑浏览模式？在我们使用手机浏览器浏览网页的时候，由于手机端与电脑端访问同一个页面会出现不同风格的页面布局，有时会因为需要，想要使用手机浏览电脑端的网页，但却不知道如何燥多，对此河东软件园小编为大家带来了华为手机修改浏览器模式为电脑浏览模式的方法，下面我们一起学习下吧。方法步骤：第一种方法1、首先需要我们点击打开手机自带的浏览器；2、进入页面以后再继续点击页面下方的“三...

html文件怎么用华为手机打开,如何调整华为手机中的文件默认打开方式

weixin_36382265的博客

06-17

9530

如何调整华为手机中的文件默认打开方式当我们在使用华为手机的时候，如果想要调整文件的默认打开方式的话，应如何进行操作呢？接下来就由小编来告诉大家。具体如下：1. 第一步，打开手机中的设置页面，进入设置页面后，点击下方的应用管理选项。2. 第二步，进入应用管理页面后，找到需要修改打开方式的应用，如果选错的打开方式是发送给QQ好友的话，就需要在菜单中找到QQ选项并点击打开，然后点击应用信息页面下方的默认...

华为手机 如何看html文件,html查看

weixin_31862047的博客

07-20

1262

html查看内容精选换一换参考内容及网址说明内容网址查看典型案例指导 https://support.huaweicloud.com/bestpractice-tk-kunpengdevps/kunpengsptmysqlpractice_21_0012.html 查看详细指导文档 https://support参考内容及网址说明内容网址查看典型案例指导 https://suppor...

VUE 华为手机 IOS8.2浏览器打不开，显示空白的解决方案！！！！！！！！

jin270315475的博客

03-29

1万+

我上来就想骂一句这个问题弄了一天！vue2.0框架在华为破手机还有uc部分低版本访问不了，是白页，找了好久的问题、用过网上很多方法， es6转es5 编译什么的都没用最好才找到解决方法！亲身经历啊，为了不让你们在入坑，我专门来写的！少废话来正题！想解决uc 华为 ios低版本各种浏览器白页问题最快的解决方法是用iE浏览器的 edge版本...

关于x5内核浏览器使用vue兼容性问题

weixin_33709609的博客

01-18

2519

x5内核浏览器 华为手机,一加手机不支持vue2.0以上版本和es6语法 vue完整项目使用适用于webpack构建工作创建的项目 webpack构建工具加载babel--polyfill垫片 npm install --save-dev babel-polyfill 复制代码引用方式 1.require("babel-polyfill"); 2.import "babel-polyfill...

Vue2.0组件实现动态搜索引擎

04-04

1. 创建搜索框组件首先，我们需要创建一个搜索框组件，可以使用Element UI中的Input组件来实现，同时为了实现搜索框的动态特效，我们需要使用Vue的watch属性来监听搜索框的value值的变化。 ```html <template> <el-input v-model="value" placeholder="请输入搜索内容" @keyup.enter="handleSearch"></el-input> </template> <script> export default { data() { return { value: '' } }, watch: { value(val) { this.$emit('search', val) } }, methods: { handleSearch() { this.$emit('search', this.value) } } } </script> ``` 在上面的代码中，我们使用了Element UI中的Input组件，同时定义了value属性来存储搜索框的值。并且使用了watch属性来监听value值的变化，并且在value值发生变化时，触发search事件向父组件发送搜索请求。同时，在搜索框的enter键被按下时，也会触发handleSearch方法，向父组件发送搜索请求。 2. 创建搜索结果组件接下来，我们需要创建一个搜索结果组件，用于展示搜索结果。在此，我们将使用Element UI中的Table组件来实现搜索结果的展示，同时也需要使用Vue的props属性来接收父组件传递过来的搜索结果数据。 ```html <template> <el-table :data="searchResult"> <el-table-column label="ID" prop="id"></el-table-column> <el-table-column label="名称" prop="name"></el-table-column> <el-table-column label="价格" prop="price"></el-table-column> </el-table> </template> <script> export default { props: { searchResult: { type: Array, default: () => [] } } } </script> ``` 在上面的代码中，我们使用了Element UI中的Table组件，并且使用了props属性来接收父组件传递过来的searchResult数据（即搜索结果数据）。同时，我们也定义了搜索结果的列名和列属性，以及使用了默认值来避免在没有搜索结果时出现错误。 3. 实现父组件最后，我们需要在父组件中将搜索框和搜索结果组件组合起来，并且实现搜索功能。在此，我们可以使用Vue的computed属性来实现搜索功能，同时也需要使用Vue的methods属性来处理搜索请求，最终将搜索结果数据传递给搜索结果组件。 ```html <template> <div> <search-box @search="handleSearch"></search-box> <search-result :search-result="searchResult"></search-result> </div> </template> <script> import SearchBox from './SearchBox' import SearchResult from './SearchResult' export default { components: { SearchBox, SearchResult }, data() { return { data: [ { id: 1, name: 'iPhone 12', price: 5999 }, { id: 2, name: '华为Mate 40', price: 4999 }, { id: 3, name: '三星Galaxy S21', price: 5399 }, { id: 4, name: '小米11', price: 3999 }, { id: 5, name: 'OPPO Reno4 Pro', price: 3799 } ], searchResult: [] } }, computed: { filteredData() { const keyword = this.keyword.trim().toLowerCase() if (keyword === '') { return [] } else { return this.data.filter(item => item.name.toLowerCase().indexOf(keyword) !== -1) } } }, methods: { handleSearch(keyword) { this.keyword = keyword this.searchResult = this.filteredData } } } </script> ``` 在上面的代码中，我们首先引入了搜索框和搜索结果组件，并且定义了data数据来存储所有商品数据。同时，我们也定义了searchResult数据来存储搜索结果数据。在computed属性中，我们使用了filteredData方法来根据关键词搜索匹配的商品数据，如果关键词为空，则返回空数组。在methods属性中，我们定义了handleSearch方法来处理搜索请求，并且将搜索结果数据赋值给searchResult数据。最后，我们将搜索框和搜索结果组件组合起来，并且将searchResult数据传递给搜索结果组件，实现了动态搜索引擎的功能。