微信群签到小程序_Vue SSR 组件加载问题

  • 栏目:行业动态 时间:2021-01-08 15:14 分享新闻到:
<返回列表

这篇文章主要介绍了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 puted 属性 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   内置的全局 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 {
 s:{
 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.$ponents.Loading = () = import('vue-loading');
 mounted(){
 /script 

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

总结

以上所述是小编给大家介绍的Vue SSR 组件加载问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


分享新闻到:

更多阅读

协会商会网站模版-天津网站制作

行业动态 2021-01-13
【鹊起高新科技_先提升后付_手机微信:179900】十多年技术专业天津市网站制作制作提升企业...
查看全文

广州凡科互联网科技股份有限公司招聘媒

行业动态 2021-01-12
招聘人数:20职位信息岗位职责:1、根据日常内部需求及时寻找合适媒体,和媒体及各中介公...
查看全文

微信活动报名小程序_jquery完成自习气ba

行业动态 2021-01-12
jquery完成响应式banner聚焦点图 文中关键共享了jquery完成响应式banner聚焦点图的实例编码...
查看全文
返回全部新闻


区域站点: 南丰县微信小程序开发教程   南宫市小程序开发模板   囊谦县微信小程序开发者工具   南和县签到小程序   南华县微信小程序开发教程   南江县小程序开发模板   南京市微信小程序开发者工具   南靖县签到小程序   南康市微信小程序开发教程   南乐县小程序开发模板   南陵县微信小程序开发者工具   南宁市签到小程序   南平市微信小程序开发教程   南皮县小程序开发模板   南市区微信小程序开发者工具   南通市签到小程序   南投县微信小程序开发教程   南雄市小程序开发模板   南溪县微信小程序开发者工具   南阳市签到小程序   南漳县微信小程序开发教程   南召县小程序开发模板   南郑县微信小程序开发者工具   那坡县签到小程序   那曲县微信小程序开发教程   纳雍县小程序开发模板   讷河市微信小程序开发者工具   内黄县签到小程序   内江市微信小程序开发教程   内丘县小程序开发模板   内乡县微信小程序开发者工具   嫩江市签到小程序   聂荣县微信小程序开发教程   尼玛县小程序开发模板   尼木县微信小程序开发者工具   宁安市签到小程序   宁波市微信小程序开发教程   宁城县小程序开发模板   宁德市微信小程序开发者工具   宁都县签到小程序   宁国市微信小程序开发教程   宁海县小程序开发模板   宁化县微信小程序开发者工具   宁晋县签到小程序   宁陵县微信小程序开发教程   宁明县小程序开发模板   宁南县微信小程序开发者工具   宁强县签到小程序   宁陕县微信小程序开发教程   宁武县小程序开发模板   宁乡市微信小程序开发者工具   宁阳县签到小程序   宁远县微信小程序开发教程   农安县小程序开发模板   磐安县微信小程序开发者工具   盘锦市签到小程序   盘山县微信小程序开发教程   磐石市小程序开发模板   盘州市微信小程序开发者工具   蓬安县签到小程序   澎湖县微信小程序开发教程   蓬莱市小程序开发模板   彭山县微信小程序开发者工具   蓬溪县签到小程序   彭阳县微信小程序开发教程   彭泽县小程序开发模板   彭州市微信小程序开发者工具   偏关县签到小程序   平安县微信小程序开发教程   平昌县小程序开发模板   平定县微信小程序开发者工具   屏东县签到小程序   平度市微信小程序开发教程   平果县小程序开发模板   平和县微信小程序开发者工具   平湖市签到小程序   平江县微信小程序开发教程   平乐县小程序开发模板   平凉市微信小程序开发者工具   平利县签到小程序   平罗县微信小程序开发教程   平陆县小程序开发模板   屏南县微信小程序开发者工具   平泉市签到小程序   屏山县微信小程序开发教程   平顺县小程序开发模板   平塘县微信小程序开发者工具   平潭县签到小程序   平武县微信小程序开发教程   萍乡市小程序开发模板   平乡县微信小程序开发者工具   平阳县签到小程序   平遥县微信小程序开发教程   平阴县小程序开发模板   平邑县微信小程序开发者工具   平远县签到小程序   平舆县微信小程序开发教程   皮山县小程序开发模板   普安县微信小程序开发者工具   浦北县签到小程序   浦城县微信小程序开发教程   普洱市小程序开发模板   普格县微信小程序开发者工具   浦江县签到小程序   普兰县微信小程序开发教程   普宁市小程序开发模板   莆田市微信小程序开发者工具   迁安市签到小程序   乾安县微信小程序开发教程   潜江市小程序开发模板   潜山市微信小程序开发者工具  

友情链接: 微信开发小程序步 微信小程序页面制 微信小程序快捷开 小程序开发教程 手机版

Copyright © 2002-2020 微信小程序开发者工具_签到小程序_微信小程序开发教程_小程序开发模板_留言小程序 版权所有 (网站地图) 备案号:粤ICP备10235580号