在开发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. C#获得指定目录床架时间、更新时间和最后访问时间等信息的代码

    将做工程过程常用的内容片段备份一次,下面的内容内容是关于C#获得指定目录床架时间.更新时间和最后访问时间等信息的内容,希望能对小伙伴们也有用. using System;using System.IO ...

  2. 如何利用Vagrant快速搭建相同配置的开发环境?

    作为一名程序猿,我们常常会遇到需要搭建开发环境的问题,特别是在新入职的时候,sublime, node, apache, mysql, php等等以及各种框架的安装.如果入职的是大公司有可能这些必要的 ...

  3. Linux 中磁盘容量配额

    linux的设计之处就是为了多用户同时执行不同的任务,但是硬件资源是有限的,不能让一个用户无限制的上传文件,如果不加以限制,那么磁盘最终将会被充满,对此我们应该使用uquota来加以限制. 1.quo ...

  4. Cube的高级设置

    分享来源地址:http://bigdata.51cto.com/art/201705/538648.htm Cube的高级设置 随着维度数目的增加,Cuboid 的数量会爆炸式地增长.为了缓解 Cub ...

  5. AD域安装及必要设置

    本文主要介绍AD域的安装和程序开发必要的设置.   一.安装AD域 运行dcpromo命令,安装AD域. 步骤:     1.win+R     2.dcpromo 图例:           百度百 ...

  6. 创建你的一个composer包

    如何创建自己的一个composer包,这个其实很好解决的!只要你了解composer相关的知识便不难做到. 首先,你还不知道什么是composer的话,请先学习下composer的相关知识.简单的说, ...

  7. 英语口语练习系列-C11-了解

    词汇 actor [ˈæktə(r)] n. 男演员 He is a good actor. 他是一个好演员. afternoon [ˌɑ:ftəˈnu:n] n. 下午 a boring after ...

  8. RabbitMQ消费者消息权重,

    有的消费者处理速度快,有的消费者处理速度慢,我们想给处理快的多发消息,处理慢的少发消息, 怎么办呢?按照之前的轮询模式,肯定不行的,这里可以检测消息数量,如果消费者正在处理就不给他发 .... def ...

  9. 【English】20190312

    tokens记号 [ˈtoʊkən]   delimiter characters分隔符字符 [dɪ'lɪmɪtə]  [ˈkærɪktɚs]    argument论据主题[ˈɑ:rgjumənt] ...

  10. 日志学习系列(四)——NLog实例

    具体不想介绍了,新建一个解决方案 ,直接用NuGet安装就行了 具体项目代码可以在https://github.com/qiuxianhu/SimpleNLog下载