Vue SSR 组件加载问题
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 https:// github.com/hubcarl/easy webpack 内置的全局 Webpack 常量 EASY_ENV_IS_BROWSER http:// hubcarl.github.io/easyw ebpack/webpack/env 进行 判断。 这样在构建压缩期间, 如果是 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 挂载组件, 从而达到解决服务端渲染报错的问题
总结
以上所述是小编给大家介绍的Vue SSR 组件加载问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- CentOS6.5开放端口,配置防火墙
- JavaWeb(一)Servlet中乱码解决与转发和重定向的区别
- Java魔法堂:四种引用类型、ReferenceQueue和WeakHashMap
- Javascript中数组的使用
- JavaWeb(一)Servlet中的request与response
- 数据库18456错误怎么解决
- JavaWeb(一)Servlet中的ServletConfig与ServletContext
- 语义化HTML:p、h1-6、q、blockquote、hr、address、code、pre、var、cite、dfn和samp
- Win7系统 IIS 调试ASP(aspcmsgbk25) 错误号:3706 提示 “未找到提供程序 该程序可能未正确安装”解决办法
- 普通文件和数据库存储的对比
- JavaWeb(一)之细说Servlet
- jQuery Tools Scrollable使用的限制
- OOAD-设计模式(一)概述
- 导出表结构(数据字典)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux系统安装zookeeper 服务的方法
- 详解Linux中关于引号的那些事
- seaborn可视化数据框中的多个列元素
- Android OpenGLES如何给相机添加滤镜详解
- VmWare安装centos7无法上网的解决方法
- 如何修改CentOS服务器时间为北京时间
- linux下搭建go环境的安装配置讲解
- linux下搭建scala环境并写个简单的scala程序
- 在Linux系统下上传项目到码云的方法
- 使用seaborn绘制热图
- CentOS中环境变量与配置文件的深入讲解
- 详解linux下fsevents模块引起的npm ls报错解决办法
- 解决nginx/apache静态资源跨域访问问题详解
- 可怕的万圣节 Linux 命令
- linux环境不使用hadoop安装单机版spark的方法