背景
最近在给业务组件库集成指令库,将各个项目中常用的指令如一键复制、元素和弹窗拖拽等封装到一起,进行统一发版维护。
业务组件库项目架构采用的是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(),
},
},
},
...
现在分享出来,希望对你有所帮助,记得点个赞哟~
- corresponding directive transform ignored missingcorresponding directive transform ignored ignoring centos7 missing sysroot correspondence transformers aggregation笔记 corresponds corresponding correspondence corresponds the describe version corresponding serialnumber certificate the syntax your corresponds the correspondence learning outliers feature