在开发nuxt项目的时候,我们难免会使用到document来获取dom元素。如果直接在文件中使用就会报错。这是因为document是浏览器端的东西服务端并没有。

解决方法:

我们只需要在使用的地方通过process.browser/process.server来判断

如下:

if (process.browser) {
let myVideo = document.getElementById('mini_video');
if (myVideo) {
if (!this.videoShow) {
myVideo.pause();
} else {
myVideo.play();
}
}
}

nuxt.js实战之window和document对象的使用的更多相关文章

  1. javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

    一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...

  2. Window及document对象的区别

    一.Window对象 -------------------------------------------------- ------------------- 对象属性 window //窗户自身 ...

  3. js基础之DOM中document对象的常用属性方法

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.an ...

  4. Window及document对象

    注:页面上元素name属性以及JavaScript引用的名称必须一致包括大小写 否则会提示你1个错误信息 "引用的元素为空或者不是对象" 一.Window对象 ---------- ...

  5. nuxt.js实战之引入jquery

    head: { title: 'nuxt', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-widt ...

  6. nuxt.js实战之移动端rem

    nuxt.js的项目由于是服务端渲染,通过js动态调整不同尺寸设备的根字体这种rem方案存在一种缺陷.由于设置字体的代码不能做服务端渲染,导致服务端返回的代码一开始没有相应的跟字体,直到与前端代码进行 ...

  7. nuxt.js实战之用vue-i18n实现多语言

    一.实现步骤 1.安装vue-i18n并且创建store.js(vuex状态管理)文件 2.创建一个(middleware)中间件,用来管理不同的语言 3.创建不同语言的json文件作为语言包(例如: ...

  8. nuxt.js实战踩坑记录

    读万卷书不如行万里路,必须实践出真理! 看官方文档安装项目vue init nuxt-community/starter-template <project-name>注意:这是新手项目不 ...

  9. nuxt.js实战之开发环境配置

    一.创建项目 1.使用如下命令生成项目 vue init nuxt-community/starter-template testPro --testPro为项目名称 2.进入到项目根目录下,使用np ...

随机推荐

  1. Android 屏幕适配插件 ScreenMatch

    概述 ScreenMatch是根据你的需要,生成需要适配的尺寸的文件,手机会根据屏幕相关参数自动寻找合适的尺寸文件 添加插件 如图,打开Android Studio的Settings设置,找到Plug ...

  2. C++ 死循环在语言层面的检测

    英文概念 Infinite loop without side-effects 这个目前只有CLang实现了这个C++特色 #include <iostream> int 费马定理() { ...

  3. App跟web定位元素页面相互切换

    很多QA在做UI自动化或者App自动化的时候,会遇到在web页面要抓取App模式的元素,或者是在App要抓取H5页面的元素,从网上整理了一些方法,不一定能解决,但是试一下也未尝不可,如果解决了就记得关 ...

  4. Spring容器

    1.Spring简介: a)Spring春天 b)官网:https://spring.io c)设计理念:轮子理念,不要重复创造轮子: d)Spring可以被理解为一个容器,用于管理其他的框架: e) ...

  5. CentOS7 设置yum源

    1.关闭防火墙 临时关闭防火墙 systemctl stop firewalld 永久防火墙开机自关闭 systemctl disable firewalld 临时打开防火墙 systemctl st ...

  6. 用 Heapster 监控集群 - 每天5分钟玩转 Docker 容器技术(176)

    Heapster 是 Kubernetes 原生的集群监控方案.Heapster 以 Pod 的形式运行,它会自动发现集群节点.从节点上的 Kubelet 获取监控数据.Kubelet 则是从节点上的 ...

  7. SQL Server中LIKE %search_string% 走索引查找(Index Seek)浅析

      在SQL Server的SQL优化过程中,如果遇到WHERE条件中包含LIKE '%search_string%'是一件非常头痛的事情.这种情况下,一般要修改业务逻辑或改写SQL才能解决SQL执行 ...

  8. Expression

    表达式目录树 1.什么是表达式目录树Expression? 表达式目录树是一个数据结构,语法树. 首先我们去看看 Expressions类 ,定义了一个泛型委托类型 TDelegate: // 摘要: ...

  9. 龙尚 U9300C wvdial 拨号上网

    龙尚 U9300C    7模   4G LTE   (国内全网通) 接入linux系统会有4个串口 其中ttyUSB2 为AT指令口 ttyUSB1 为拨号上网口 wvdial   拨号入网参数 [ ...

  10. webstorm 的 .后缀名-tab快捷键

    if (key) {}//key.if tab if (!key) {}//key.else tab if (key != null) {}//key.notnull tab if (typeof k ...