配置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>
