nuxt3由于自定义指令导致seo失效原因

       在之前进行代码负优化，代码部署上线后发现博客详情页面的seo失效了。下面为报错信息：

Cannot read properties of undefined (reading 'getSSRProps')

       将报错信息进行搜索后，发现其他使用者也有过类似的情况，但是试过好像无用,网上可行方案如下 dome地址

但是在此之前我的seo还是处于正常工作的。

       我的自定义指令代码（plugins/highlight.ts）：

import hljs from 'highlight.js'
import {defineNuxtPlugin} from '#app'
import 'highlight.js/styles/monokai-sublime.css'

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('highlight',
        {
            mounted(el) {
                let element = el.querySelectorAll('pre code')
                element.forEach((block: any) => {
                    hljs.highlightElement(block)
                })
            },
            getSSRProps(binding, vnode) {
                // 你可以在这里提供SSR特定的props
                return {}
            },
        },
    )
})      

       在nuxt.config.ts中的错误配置如下：

export default defineNuxtConfig({
    plugins: [
        {
            src: '~/plugins/highlight.ts',
            mode: 'client', // 这样配置会导致报错
        },
    ]    
})

       由于自定义指令highlight在服务端也有使用，但是我把mode改成了client,导致服务端报错，进而导致seo失效，也就是说如果这个指令你只在客户端有使用，你可以将mode设置为client,但是如果你在服务端以及客户端都有使用该指令，那么你得将mode修改为all.

       官方提示有说：(链接)

如果你注册了一个Vue指令，你必须在客户端和服务器端都注册它，除非你只在一个端口渲染时使用它。如果这个指令只在客户端有意义，你可以将它移动到~/plugins/my-directive.client.ts，并在~/plugins/my-directive.server.ts中为服务器端提供一个'存根'指令

       所以将mode 改为all或者直接将mode删除，也就解决了该问题

export default defineNuxtConfig({
    plugins: [
        {
            src: '~/plugins/highlight.ts',
            mode: 'all',
        },
    ]    
})

       修改后重新打包部署也就解决了该问题，不得不说，代码优化也是bug来源