用vue-loader Custom Blocks显示源代码

配置vite.config.ts

//vite.config.ts
import fs from 'fs';
import { baseParse } from '@vue/compiler-core';
export default {
    vueCustomBlockTransforms: {
    // 遇到demo标签就执行以下代码
        demo: (options) => {
            const { code, path } = options;
            const file = fs.readFileSync(path).toString();
      // 判断虚拟节点是否存在tag为deom的标签
            const parsed = baseParse(file).children.find((n) => n.tag === 'demo');
            const title = parsed.children[0].content;
      // 删除demo标签
            const main = file.split(parsed.loc.source).join('').trim();
      // 组件对象增加__sourceCode属性，值为源代码
            return `export default function (Component) {
        Component.__sourceCode = ${JSON.stringify(main)}
        Component.__sourceCodeTitle = ${JSON.stringify(title)}
      }`.trim();
        }
    }
};

使用

//需要展示源代码的文件
<demo>
  title
</demo>
<template>
 //code
</template>
  
<script lang="ts">
export default {
 //code
};
</script>