vite 项目显示文件源代码

1. 在根目录下新建 vite.config.js

import fs from 'fs';
import {baseParse} from '@vue/compiler-core';
export default {
  vueCustomBlockTransforms: {
    demo: (options) => {
      const {code, path} = options;
      const file = fs.readFileSync(path).toString();
      const parsed = baseParse(file).children.find(n => n.tag === 'demo');
      const title = parsed.children[0].content;
      const main = file.split(parsed.loc.source).join('').trim();
      return `export default function (Component) {
        Component.__sourceCode = ${
        JSON.stringify(main)
      }
        Component.__sourceCodeTitle = ${JSON.stringify(title)}
      }`.trim();
    }
  }
};

2. 在文件中使用 demo 组件

<demo>
    显示源代码  // __sourceCodeTitle 属性的值
</demo>