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(),
      },
    },
  },
...

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

如果你覺得不錯的話，右下角，隨手點個推薦，鼓勵支持hhh^_^

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/555405.html

標籤：其他

上一篇：前端vue單個檔案上傳支持圖片，壓縮包以及檔案，下載完整代碼請訪問uni-app插件市場址:https://ext.dcloud.net.cn/plugin?id=13066

下一篇：返回列表