解决Vue2.0自带浏览器里无法打开的原因(兼容处理)

本文介绍了解决Vue2.0自带浏览器里无法打开的原因(兼容处理),分享给大家,希望对大家有帮助

Vue 之 android内嵌H5页面不显示出现这个问题,原因有很多

首先,别急,请看下面的推荐方案:

1、找个Android真机测试下(机型版本为4.4以上),真机联调测试

Android

只需要四个步骤:

1、先保证 是否安装了chrome浏览器

2、其次 ,保证 chrome 是否 已经翻墙成功!

3、最后 使用Android 真机连接 电脑

4、最后的最后,打开chrome ,输入:chrome://inspect

即可,另外,chrome只支持 android 4.4以上手机!

IOS

只需要两步骤:

1、打开手机端web检查器,设置 -> Safari -> 高级(最底部) -> Web 检查器 打开

2、确保iOS系统手机接入 MAC 电脑(必须是Mac,window调试不了ios系统)

3、找到Mac电脑的 Safari浏览器,找到开发者,就会显示的手机的设备

4、此时此刻就可以使用了,调试各个App上网页版的页面了。

注:如果是 Hybrid 嵌入式开发,线上版本,可能就不能调试了,因为IOS App 会把线上的调试功能给禁用,安全!

2、如果报 报错 vuex requires a Promise polyfill in this browser.那么,就是兼容性不够好,请看下面的解决方案:

首先,使用 node 安装 *babel-polyfill 命令*

npm install --save-dev -polyfill

解决方案1:在 webpack.config.js 文件中,entry 入口处修改,加入即可

"babel-polyfill":"babel-polyfill",//用来解决的兼容性

例如:

entry: {
  "babel-polyfill":"babel-polyfill",//用来解决的兼容性
  app: path.resolve(__dirname, config.entry.module + "/app.js"),
  vendor: config.entry.vendor
},

解决方案2:不修改webpack的情况下,在你的主入口文件头部加入,例如:app.js中加入即可

import 'babel-polyfill'

例如:

import 'babel-polyfill'

import Vue from 'vue';
Vue.config.debug = true;

解决方案3:也就是使用cdn的资源,以js的文件加入到html页面:例如:

<script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>

PS:我没试过

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-07-26

Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D

详解vue服务端渲染浏览器端缓存(keep-alive)

在使用服务器端渲染时,除了服务端的接口缓存.页面缓存.组建缓存等,浏览器端也避免不了要使用缓存,减少页面的重绘. 这时候我们就会想到vue的keep-alive,接下来我们说一下keep-alive的使用 假如现在我们有两个页面,home.vue 和 about.vue home.vue <template> <div> home </div> </template> <script> export default { name: Home, c

vue服务端渲染的实例代码

一.什么是服务端渲染 客户端请求服务器,服务器根据请求地址获得匹配的组件,在调用匹配到的组件返回Promise (官方是asyncData方法)来将需要的数据拿到.最后再通过window.__initial_state=data将其写入网页,最后将服务端渲染好的网页返回回去.接下来客户端将用新的store状态把原来的store状态替换掉,保证客户端和服务端的数据同步.遇到没被服务端渲染的组件,再去发异步请求拿数据. 服务端渲染的环境搭建 这是vue官网的服务端渲染的示意图,ssr有两个入口文件,

详解vue服务端渲染(SSR)初探

前言 首先来讲一下服务端渲染,直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回给前端.具体用法也有很多种比如: 传统的服务端模板引擎渲染整个页面 服务渲染生成htmll代码块, 前端 AJAX 获取然后js动态添加 服务端渲染的优劣 首先是seo问题,前端动态渲染的内容是不能被抓取到的,而使用服务端渲染就可以解决这个问题.还有就是首屏加载过慢这种问题,比如在SPA中,打开首页需要初始加载很多资源,这时考虑在首屏使用服务端渲染,也是一种折中的优化方案.但是使用SSR时,势必会增加服

详解Nuxt.js Vue服务端渲染摸索

本文采用nuxt进行服务端渲染https://zh.nuxtjs.org/ Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可. Vue因其简单易懂的API.高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐.国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的. 我们知道,SPA前端渲染存在两大痛点:(1)SEO.搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息,使网站无法在搜索引擎中被用户搜索到.(2)用

vue服务端渲染缓存应用详解

服务端渲染简介 服务端渲染不是一个新的技术:在 Web 最初的时候,页面就是通过服务端渲染来返回的,用 PHP 来说,通常是使用 Smarty 等模板写模板文件,然后 PHP 服务端框架将数据和模板渲染为页面返回,这样的服务端渲染有个缺点就是一旦要查看新的页面,就需要请求服务端,刷新页面. 但如今的前端,为了追求一些体验上的优化,通常整个渲染在浏览器端使用 JS 来完成,配合 history.pushState 等方式来做单页应用(SPA: Single-Page Application),也收

Vue服务端渲染实践之Web应用首屏耗时最优化方案

随着各大前端框架的诞生和演变,SPA开始流行,单页面应用的优势在于可以不重新加载整个页面的情况下,通过ajax和服务器通信,实现整个Web应用拒不更新,带来了极致的用户体验.然而,对于需要SEO.追求极致的首屏性能的应用,前端渲染的SPA是糟糕的.好在Vue 2.0后是支持服务端渲染的,零零散散花费了两三周事件,通过改造现有项目,基本完成了在现有项目中实践了Vue服务端渲染. 关于Vue服务端渲染的原理.搭建,官方文档已经讲的比较详细了,因此,本文不是抄袭文档,而是文档的补充.特别是对于如何与现

vue服务端渲染操作简单入门实例分析

本文实例讲述了vue服务端渲染操作.分享给大家供大家参考,具体如下: 想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目.然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好. 话不多说,笔者也是研究多日才搞明白这个服务端渲染到底是杂么回事!!! 一,首先实现下官网的基本案例 随便建一个目录,然后执行npm init初始化项目,生成工程文件package.json:创建server.js:然后按照vue-ssr官方链接:https://ssr.v

vue服务端渲染添加缓存的方法

什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序. 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务器和客户端上运行. 缓存 虽然 Vue 的服务

Vue 服务端渲染SSR示例详解

目录 手写Vue服务端渲染 一.开始vue-ssr之旅 二.采用模板渲染 三.ssr目录创建 四.通过webpack实现编译vue项目 app.js client-entry.js server-entry.js 五.配置客户端打包和服务端打包 六.配置运行脚本 七.服务端配置 七.通过json配置createBundleRenderer方法 八.集成VueRouter 配置入口文件 配置组件信息 防止刷新页面不存在 保证异步路由加载完成 十.集成vuex配置 在后端更新vuex 在浏览器运行时