这篇文章主要介绍如何解决Vue中SSR组件加载问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、响应式网站设计、程序开发、微网站、微信小程序等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的成都网站建设、网站制作、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体,具备承接不同规模与类型的建设项目的能力。Node 端渲染提示 window/document 没有定义
业务场景
首先来看一个简单的 Vue 组件 test.vue
<template> <div> <h3>clientHeight: {{ clientHeight }} px </h3> </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组件加载问题”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
本文名称:如何解决Vue中SSR组件加载问题-创新互联
链接分享:https://www.cdcxhl.com/article42/dposhc.html
成都网站建设公司_创新互联,为您提供Google、外贸建站、自适应网站、网站策划、搜索引擎优化、标签优化
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联