背景
最近在給業(yè)務(wù)組件庫集成指令庫，將各個項(xiàng)目中常用的指令如一鍵復(fù)制、元素和彈窗拖拽等封裝到一起，進(jìn)行統(tǒng)一發(fā)版維護(hù)。
業(yè)務(wù)組件庫項(xiàng)目架構(gòu)采用的是pnpm+vite+vue3+vitepress，其中vitepress主要做組件庫文檔站點(diǎn)同時展示可交互的組件。
問題
開發(fā)運(yùn)行時指令庫demo沒有問題，構(gòu)建編譯時就會報錯，編譯不通過，報錯：Custom directive is missing corresponding SSR transform and will be ignored
一番查找原因，發(fā)現(xiàn)是VitePress應(yīng)用在生成靜態(tài)構(gòu)建時是通過Node.js服務(wù)端渲染的，識別不了我們的包含
自定義指令的組件。
解決方式
一番搜索和chatgpt問答后，參考了https://blog.csdn.net/theoneEmperor/article/details/114087464，在vite.config.ts中進(jìn)行配置，
還是構(gòu)建編譯不過，反而產(chǎn)生新的錯誤，
又試過https://www.npmjs.com/package/patch-vue-directive-ssr庫，這個，本地構(gòu)建編譯不報錯了，但線上構(gòu)建還是會報錯
最后在官方vitepress文檔中找到
使用或展示非SSR友好(比如包含自定義指令)的組件，可以使用 vitepress中的全局組件 ClientOnly將其包裹
<ClientOnly>
<NonSSRFriendlyComponent />
</ClientOnly>
但包裹后，還是會構(gòu)建不通過，官方文檔沒有明確的說明，還得進(jìn)行如下配置才行：文章來源：http://www.zghlxwxcb.cn/news/detail-486324.html
//docs\.vitepress\config.ts 文件
...
const buildTransformers = () => {
const transformer = () => {
return {
props: [],
needRuntime: true,
}
}
const transformers = {}
// 自定義的指令要添加到該數(shù)組中
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(),
},
},
},
...
現(xiàn)在分享出來，希望對你有所幫助，記得點(diǎn)個贊喲~文章來源地址http://www.zghlxwxcb.cn/news/detail-486324.html
到了這里，關(guān)于Custom directive is missing corresponding SSR transform and will be ignored的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![nginx : [warn] the “ssl“ directive is deprecated, use the “l(fā)isten ... ssl“ directive instead 解決](https://imgs.yssmx.com/Uploads/2024/02/515585-1.png)
