背景

最近在给业务组件库集成指令库,将各个项目中常用的指令如一键复制、元素和弹窗拖拽等封装到一起,进行统一发版维护。

业务组件库项目架构采用的是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(),
},
},
},
...

现在分享出来,希望对你有所帮助,记得点个赞哟~

Custom directive is missing corresponding SSR transform and will be ignored的更多相关文章

  1. [Angular] @ViewChild read custom directive and exportAs

    For example we have a component: <Card ></Card> And a driective: <Card highlighted> ...

  2. [Angular] Custom directive Form validator

    Create a directive to check no special characters allowed: import {Directive, forwardRef} from '@ang ...

  3. Collection View Programming Guide for iOS---(六)---Creating Custom Layouts

    Creating Custom Layouts 创建自定义布局 Before you start building custom layouts, consider whether doing so ...

  4. babeljs源码

    babel.min.js!function(e,t){"object"==typeof exports&&"object"==typeof mo ...

  5. 关于Eclipse Modeling Framework进行建模,第二部分

    使用 Eclipse Modeling Framework 进行建模,第 2 部分 Eclipse 的 Java Emitter Templates(JET) 是一个开放源代码工具,可以在 Eclip ...

  6. Vue 2.0 学习路线

    「 Vue很难学吗 」 对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就 ...

  7. 新手入门指导:Vue 2.0 的建议学习顺序

    起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...

  8. 初学Vue2.0--基础篇

    概述: 鉴于本人初学,使用的编译器是webStorm,需添加对VUE的支持,添加方法可以参考 http://www.jianshu.com/p/142dae4f8b51. 起步: 1. 扎实的 Jav ...

  9. Vue.js 整理笔记

    以前我们用Jquery进行dom的操作,虽然熟悉后开发效率很高,但是如果多个控件的相互操作多的情况下,还是会乱.相比之下,Vue的使用更加清晰,通过虚拟dom将数据绑定,而且组件化和路由的帮助下,让整 ...

  10. Angular概念纵览

    Conceptual Overview Template(模板): HTML with additional markup (就是增加了新的标记的HTML) Directive(指令): extend ...

随机推荐

  1. 购物车,实现增删改查;无bug,还有一个直接修改购物车数量功能未实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 使用vSphere Update Manager 升级 ESXi 主机

    使用vSphere Update Manager 升级 ESXi 主机 vSphere Update Manager  vSphere Update Manager 是用于升级.迁移.更新和修补群集主 ...

  3. Unity3D中的Attribute详解(一)

    首先来看一下微软官方对Attributes(C#)的定义: https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/conce ...

  4. vue指令之属性指令

    目录 属性指令 示例 属性指令 标签上的属性可以绑定变量,变量变化,属性也会变化 # 什么是属性?比如: href/src/name/value/class/style... 语法: v-bind:属 ...

  5. 通过python修改本地ip

    写在前面, 1 对于个人公司需要固定ip,而回家需要用到家里的ip, 2对于公司it人员,每台电脑都需要设置ip,,尤其批量的时候,这个作为it的自己知道 3运维人员,可以通过ip测试哪些ip可以用, ...

  6. [大数据]Hadoop HDFS文件系统命令集

    基本格式: hadoop fs -cmd [args] 1 Query 显示命令的帮助信息 # hadoop fs -help [cmd] 查看hadoop/hdfs的用户 # hdfs dfs -l ...

  7. YII文件上传

    <span style="font-size:14px;">use yii\web\UploadedFile; public function actionDoarta ...

  8. win10环境下 VMware Workstation Pro 安装centos7无法上网

    一.安装centos7 网上类似的教程太多了,我就不一一写了,提供两个网址,先按照教程安装 VMware Workstation Pro ,秘钥在第二个链接里面(亲测可用), 安装完VMware在根据 ...

  9. shell执行一个程序过程

    1:shell调用执行程序或脚本 2:unix内核启动一个新的进程,在该进程中执行所指定的程序. 3:如果是编译型程序,内核成执行,如果无法执行指定的程序,返回"not executable ...

  10. Git&GitHub简介与入手(一)

    一.Git版本控制 1.集中式版本控制工具:SVN(版本控制集中在服务器端,会有单点故障风险): 2.分布式版本控制工具:Git: 3.Git简史 Talk is cheap, show me the ...