在nuxt3项目开发过程中如何使用WangEditor

       最近在搭建nuxt3的网站。当网站中使用了WangEditor富文本编辑器的时候。本地测试是没有问题的，当部署打包时我遇到了以下错误。

Cannot set property crypto of #<Object> which has only a getter WangEditor

       由于我没有设置wangEditor的mode为client,导致我将项目部署上线是出现了以上错误.

       解决方法如下：

1. 在plugin文件下建立wangEditor.ts

import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {defineNuxtPlugin} from '#app'

export default defineNuxtPlugin((nuxt) => {
    nuxt.vueApp.component('WangEditor', Editor)
    nuxt.vueApp.component('WangToolbar', Toolbar)
})

2. 在nuxt.config.ts的plugin中加如下代码

plugins: [
    {
        src: '~/plugins/wangEditor.ts',
        mode: 'client',
    },
]

       重新打包便能够正常使用了。

       mode的取值为 all, server, client, all表示该插件在服务端和浏览器端都要使用，server表示该插件仅仅在服务端使用，client表示该插件仅仅在浏览器端使用。根据项目以及插件的配置确定mode的值。我试了如果将值改为server或者all会同样的报错。可以和nuxt的服务端渲染和插件的适配有关吧。由于我没有在服务端使用wangEditor的需求，所以改为client后在项目中能正常使用。