Node 端渲染提示 window/document 没有定义

业务场景

  • 首先来看一个简单的 Vue 组件test.vue
<template>
  <div>
    <h2>clientHeight: {{ clientHeight }} px </h2>
  </div>
</template>

<script type="text/babel">
  export default {
    data(){
      return {
      }
    },
    computed :{
      clientHeight() {
        return document.body.clientHeight;
      }
    },
    mounted(){
    }
  }
</script>
  • 上面 test.vue 组件通过 Vue computed 属性 clientHeight 直接获取 document 的文档高度,这段代码在前端渲染是不会报错的,也能拿到正确的值。但如果把这个组件放到 SSR(Server Side Render) 模式下, 就会报如下错误:
ReferenceError: document is not defined

解决方案

  • 通过 typeof 判断是否是存在 document 对象, 如果存在则执行后面代码。 这种方式虽然能解决问题, 但在 Webpack 构建压缩时, 不会执行的代码不会被剔除,也会打包到 js 文件中去, 因为这个是在运行期才知道结果的, 所以在 Webpack 构建方案中,不建议使用 typeof 方式判断。而是使用 Webpack 提供的 webpack.DefinePlugin 插件定义常量解决。
clientHeight() {
  return typeof document === 'object' ? document.body.clientHeight : '';
}
  • 使用 Webpack 提供的 webpack.DefinePlugin 插件定义常量解决。 这里直接使用 easywebpack 内置的全局 Webpack 常量 EASY_ENV_IS_BROWSER 进行判断。 这样在构建压缩期间, 如果是 Node 模式构建, EASY_ENV_IS_BROWSER 会被替换为 false,如果是 Browser 模式构建, EASY_ENV_IS_BROWSER 会被替换为 true,最后构建后代码也就是变成了 true 或者 false 的常量。 因为这个是构建期间执行的,压缩插件剔除永远不会被执行的代码, 也就是 dead_code
clientHeight() {
  return EASY_ENV_IS_BROWSER ? document.body.clientHeight : '';
}

NPM Vue 组件 SSR 支持

针对上面这种自己写的代码,我们可以通过这种方式解决,因为可以直接修改。但如果我们引入的一个 npm Vue 插件想进行SSR渲染, 但这个插件里面使用了 window/docment 等浏览器对象, 并没有对 SSR 模式进行兼容,这个时候该如何解决呢?
一般我们通过 通过 v-if 来决定是否渲染该组件Vue 只在前端挂载组件解决问题 可以解决。

通过 v-if 来决定是否渲染该组件

<template>
  <div v-if="isBrowser">
    <Loading></Loading>
  </div>
</template>

<script type="text/babel">
  export default {
    componets:{
     Loading: () =>import('vue-loading');
    }
    data(){
      return {
        isBrowser: EASY_ENV_IS_BROWSER
      }
    },
    mounted(){
    }
  }
</script>

Vue 只在前端挂载组件解决问题

<template>
  <div>
    <Loading></Loading>
  </div>
</template>

<script type="text/babel">
  export default {
    data(){
      return {
      }
    },
    beforeMount() {
      // 只会在浏览器执行  
      this.$options.components.Loading = () =>import('vue-loading');
    },
    mounted(){
    }
  }
</script>

loading 组件因为没有注册, 在 SSR 模式, <Loading></Loading> 会被原样输出到 HTML 中,不会报错且不能被浏览器识别, 在显示时不会有内容。当 SSR 直出 HTML 后,浏览器模式中执行 beforeMount 挂载组件, 从而达到解决服务端渲染报错的问题。

具体例子参考:https://github.com/hubcarl/egg-vue-webpack-boilerplate/blob/master/app/web/page/dynamic/dynamic.vue


Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
Vue SSR 组件加载 Vue SSR 组件加载
Node 端渲染提示 window/document 没有定义业务场景首先来看一个简单的 Vue 组件
2020-04-18 sky
Next 
Flutter  Android  混合工程实践 Flutter Android 混合工程实践
在 Flutter 混合工程体系 一文中,阐述了Flutter 三种开发模式,在实际业务中搭建持续集成时,我们更希望发本地开发使用混合模式,持续集成使用解耦模式, 主要是解决以下两个问题: 混合模式:开发调试方便,包括热更新, Native 与 Flutter 开发源码断点调试 解耦模式:不侵...
2020-04-18 sky