Custom directive is missing corresponding SSR transform and will be ignored

背景

最近在給業務組件庫集成指令庫，將各個項目中常用的指令如一鍵複製、元素和彈窗拖拽等封裝到一起，進行統一發版維護。
業務組件庫項目架構採用的是pnpm+vite+vue3+vitepress，其中vitepress主要做組件庫文檔站點同時展示可交互的組件。

問題

開發運行時指令庫demo沒有問題，構建編譯時就會報錯，編譯不通過，報錯：
Custom directive is missing corresponding SSR transform and will be ignored

一番查找原因，發現是VitePress應用在生成靜態構建時是通過Node.js服務端渲染的，識別不了我們的包含
自定義指令的組件。

解決方式

一番搜索和chatgpt問答後，參考了https://blog.csdn.net/theoneEmperor/article/details/114087464，在vite.config.ts中進行配置，
還是構建編譯不過，反而產生新的錯誤，
又試過https://www.npmjs.com/package/patch-vue-directive-ssr庫，這個，本地構建編譯不報錯了，但線上構建還是會報錯
最後在官方vitepress文檔中找到

使用或展示非SSR友好(比如包含自定義指令)的組件，可以使用 vitepress中的全局組件 ClientOnly將其包裹

<ClientOnly>
  <NonSSRFriendlyComponent />
</ClientOnly>

但包裹後，還是會構建不通過，官方文檔沒有明確的說明，還得進行如下配置才行：

//docs\.vitepress\config.ts  文件
...
const buildTransformers = () => {
  const transformer = () => {
    return {
      props: [],
      needRuntime: true,
    }
  }

  const transformers = {}
   // 自定義的指令要添加到該數組中
  const directives = [
    'yun-copy',    
    'yun-draggable',
    'yun-long-press',
    'yun-water-marker',
  ]
  directives.forEach((k) => {
    transformers[k] = transformer
  })

  return transformers
}

...
  vue: {
    template: {
      ssr: true,
      compilerOptions: {
        directiveTransforms: buildTransformers(),
      },
    },
  },
...

現在分享出來，希望對你有所幫助，記得點個贊喲~