使用client-only 解决组件不兼容SSR问题

目录

前言

一、解决方案

1.基于Nuxt 框架的SSR应用 

2.基于vue2框架的应用

3.基于vue3框架的应用 

二、总结

往期回顾


前言

最近在我的单页面SSR应用上开发JSON编辑器功能,在引入组件后直接客户端跳转OK,但是在直接加载服务端渲染的时候一直报这个错误:[vite] Error when evaluating SSR module /node_modules/json-editor-vue3/lib/json-editor.vue: failed to import "jsoneditor"

经过查阅资料才知道是组件不兼容SSR,下面我总结了下该问题的解决方案,希望能帮到大家! 

一、解决方案

1.基于Nuxt 框架的SSR应用 

Nuxt框架提供了client-only插件来解决这个问题。

npm:https://www.npmjs.com/package/client-only

SSR场景下只需要将组件包裹起来就ok啦! 

2.基于vue2框架的应用

Vue2提供了vue-client-only插件来解决这个问题。

npm:https://www.npmjs.com/package/vue-client-only 

那么怎么使用呢?

插件安装

yarn add vue-client-only

 模板使用

<template><div id="app"><h1>My Website</h1><client-only><!-- this component will only be rendered on client-side --><comments /></client-only></div>
</template><script>import ClientOnly from 'vue-client-only'export default {components: {ClientOnly}}
</script>

注意:这个是基于vue2的插件,vue3可能不适用。

3.基于vue3框架的应用 

vue3有大神解决了vue不兼容的问题。使用@duannx/vue-client-only插件来修复。

npm:https://www.npmjs.com/package/@duannx/vue-client-only

插件安装

npm install --save @duannx/vue-client-only
or
yarn add @duannx/vue-client-only

 模板使用

<template><client-only><json-editor-vuev-model="resultInfo":show-btns="false":mode="'tree'"lang="zh":expanded-on-start="true"@json-change="onJsonChange" @json-save="onJsonSave"/></client-only>
</template><script lang="ts">
import ClientOnly from '@duannx/vue-client-only';
import JsonEditorVue from 'json-editor-vue3';
export default defineComponent({name: 'JsonFormat',components:{JsonEditorVue,ClientOnly},setup() {// json编辑器内容变化const onJsonChange = (value:any) => {console.log('value:', value);};// json编辑器内容保存const onJsonSave = (value:any) => {console.log('value:', value);};// 返回return {onJsonChange,onJsonSave,// 在data中添加测试数据resultInfo: {'test1': '1234','test2': '5678'}};}
});
</script>

 问题完美修复啦!YYDS!

二、总结

client-only 被挂载之前, 使用此属性作为文本占位符,组件只会在客户端被渲染,所以服务端加载不会再报错。今天就分享到这里啦!欢迎在评论区交流。如果文章对你有所帮助,❤️关注+点赞❤️鼓励一下博主会持续更新。。。。

我的博客:前端小阳仔_Html,CSS,JavaScript,Vue,React,Angular领域博主

往期回顾

 css实现元素居中的6种方法 

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略(面试一网打尽)!

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些?

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击?什么是 CSRF?什么是点击劫持?如何防御

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/678893.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript基础第五天

JavaScript 基础第五天 今天我们学习数组&#xff0c;以及数组的增删改查。 1. 数组 数组&#xff1a;(Array)是一种可以按顺序保存数据的数据类型。 1.1. 定义数组 可以使用 const 声明一个方括号**[ ]&#xff0c;或者使用new Array**创建数组。 const array [1, 2, 4…

Netty应用(六) 之 异步 Channel

目录 12.Netty异步的相关概念 12.1 异步编程的概念 12.2 方式1&#xff1a;主线程阻塞&#xff0c;等待异步线程完成调用&#xff0c;然后主线程发起请求IO 12.3 方式2&#xff1a;主线程注册异步线程&#xff0c;异步线程去回调发起请求IO 12.4 细节注释 12.5 异步的好处…

HiveSQL——用户行为路径分析

注&#xff1a;参考文档&#xff1a; SQL之用户行为路径分析--HQL面试题46【拼多多面试题】_路径分析 sql-CSDN博客文章浏览阅读2k次&#xff0c;点赞6次&#xff0c;收藏19次。目录0 问题描述1 数据分析2 小结0 问题描述已知用户行为表 tracking_log&#xff0c; 大概字段有&…

Rust条件语句:if-else表达式详解

在Rust中&#xff0c;条件语句是控制程序流程的重要组成部分。if-else表达式是一种用于根据条件执行不同代码分支的强大工具。本篇博客将深入介绍Rust中的if-else表达式&#xff0c;并通过具体的例子展示其用法和灵活性。 基础用法 fn main() {let number 31;if number <…

多进程服务器和多线程服务器

多进程服务器 #include<myhead.h> #define PORT 9999 //端口号 #define IP "192.168.10.116" //IP地址//定义信号处理函数&#xff0c;用于回收僵尸进程 void handler(int signo) {if(signo SIGCHLD){while(waitpid(-1, NULL, WNOHA…

【MySQL】-20 MySQL综合-6(MySQL创建数据表+MySQL修改数据表+MySQL删除数据表)

MySQL创建数据表MySQL修改数据表MySQL删除数据表 MySQL创建数据表基本语法在指定的数据库中创建表查看表结构 MySQL修改数据表基本语法添加字段修改字段数据类型删除字段修改字段名称修改表名 MySQL删除数据表基本语法删除表 MySQL创建数据表 在创建数据库之后&#xff0c;接下…

2.12作业

程序代码&#xff1a; #include<stdlib.h> #include<string.h> #include<stdio.h>//递归实现n! int n(int element) {if(0element)return 1;return element*n(element-1); }//递归实现0-n的和 int sub_sum(int element) {if(0element)return 0;return eleme…

计算机二级C语言备考学习记录

一、C语言程序的结构 1.程序的构成&#xff0c;main函数和其他函数。 程序是由main函数和其他函数构成main作为主函数&#xff0c;一个C程序里只有一个main函数其他函数可以分为系统函数和用户函数&#xff0c;系统函数为编译系统提供&#xff0c;用户函数由用户自行编写 2.…

《动手学深度学习(PyTorch版)》笔记7.7

注&#xff1a;书中对代码的讲解并不详细&#xff0c;本文对很多细节做了详细注释。另外&#xff0c;书上的源代码是在Jupyter Notebook上运行的&#xff0c;较为分散&#xff0c;本文将代码集中起来&#xff0c;并加以完善&#xff0c;全部用vscode在python 3.9.18下测试通过&…

力扣刷题之旅:高阶篇(一)—— 并查集的应用

在算法的世界中&#xff0c;并查集是一种非常高效且实用的数据结构&#xff0c;常用于处理一些具有连通性质的问题。在力扣&#xff08;LeetCode&#xff09;上&#xff0c;并查集的题目往往涉及到图的连通性、朋友关系的传递性等问题。今天&#xff0c;我们将一起探讨一道关于…

重温阿里云宝塔面板部署前后端项目

首先祝大家新年快乐啊&#xff01; 回到老家&#xff0c;便打算趁这一段空闲时间提升一下自己&#xff0c;重点是学习实践一下echarts相关内容&#xff0c;很多公司项目都需要实现可视化&#xff0c;所以在bilibili上找了黑马的一个教程开始学习&#xff0c;不同的是&#xff…

【JavaScript】遍历对象和数组

文章目录 1. 遍历对象for...in 循环Object.keys()Object.entries() 2. 遍历数组for 循环forEach()for...of 循环 3. 遍历多维数组4. 总结 在 JavaScript 中&#xff0c; 遍历是一种常见的操作&#xff0c;用于访问对象和数组中的元素。本篇博客将将介绍 JavaScript 中遍历对象…

JavaScript进阶教程 - 纯函数和不可变性

在函数式编程范式中&#xff0c;纯函数和不可变性是核心概念&#xff0c;它们有助于编写可预测、易于测试和并发安全的代码。 纯函数&#xff08;Pure Functions&#xff09; 纯函数是这样一种函数&#xff1a;给定相同的输入&#xff0c;总是返回相同的输出&#xff0c;并且…

面试 JavaScript 框架八股文十问十答第九期

面试 JavaScript 框架八股文十问十答第九期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;对象创建的方式有…

Rust标量类型详解

在Rust中&#xff0c;数据类型分为标量类型和复合类型。本篇博客将重点介绍Rust的标量类型&#xff0c;其中包括整数类型、浮点类型、布尔类型以及字符类型。 整数类型 Rust提供了多种整数类型&#xff0c;分为带符号整数和无符号整数。带符号整数表示可以为正数、零或负数&a…

电子电器架构 —— 区域控制器是未来架构的正解吗?

电子电器架构 —— 区域控制器是未来架构的正解吗? 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师(Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 本就是小人物,输了就是输了,不要在意别人怎么看自己。江湖一碗茶…

osg操控器和键盘切换操控器学习

osg提供了很多操控器,在src\osgGA目录下,cpp文件名含有Manipulator的都是操控器,每个这样的cpp表示一种类型的操控器。 名字带 Manipulator 的类都是操控器; 其中KeySwitchMatrixManipulator.cpp文件实现了键盘切换操控器; 操控器是指:操控相机运动,从而实现场景视图…

Linux(Ubuntu) 环境搭建:远程终端软件(MobeXterm)

一、MobaXterm下载地址 服务器的远程终端软件我选择的是&#xff1a;MobaXtermMobaXterm 官方网站下载地址&#xff1a;https://mobaxterm.mobatek.net/download.htmlMobaXterm 汉化版下载地址&#xff1a;https://github.com/RipplePiam/MobaXterm-Chinese-Simplified 二、官…

C# 字体大小的相关问题

设置字体大小无法这么写&#xff0c; button1.Font.Size 20&#xff1b; 这个是只读属性&#xff1b; 把字体大小改为16&#xff0c; button2.Font new Font(button2.Font.Name, 16); 程序运行的时候先看一下窗体和控件的默认字体尺寸&#xff0c;都是9&#xff1b;然后点b…

汽车出租管理系统

文章目录 汽车出租管理系统一、系统演示二、项目介绍三、系统部分功能截图四、部分代码展示五、底部获取项目源码&#xff08;9.9&#xffe5;带走&#xff09; 汽车出租管理系统 一、系统演示 汽车租赁系统 二、项目介绍 语言&#xff1a;java 框架&#xff1a;SpringBoot、…