Vue3组件源码获取：解决@vue/compiler-sfc调用报错问题

我在Vue3项目中想要实现类似Storybook的功能，获取组件对应的等效源码。尝试使用@vue/compiler-sfc的parse方法实现，但调用时出现报错。

我的代码： #

const parsedComponent = parse(MyComponent).descriptor;

// Extract template, script, and style
const template = parsedComponent.template ? parsedComponent.template.content : '';
const script = parsedComponent.script ? parsedComponent.script.content : '';
const style = parsedComponent.styles.length ? parsedComponent.styles[0].content : '';

console.log('Template:', template);
console.log('Script:', script);
console.log('Style:', style);

报错信息： #

TypeError: currentInput.slice is not a function
    at getSlice (@vue_compiler-sfc.js?v=9c64ce65:17942:23)
    at Object.ontext (@vue_compiler-sfc.js?v=9c64ce65:17585:12)
    at Tokenizer.handleTrailingData (@vue_compiler-sfc.js?v=9c64ce65:1908:16)
    at Tokenizer.finish (@vue_compiler-sfc.js?v=9c64ce65:1890:10)
    at Tokenizer.parse (@vue_compiler-sfc.js?v=9c64ce65:1869:10)
    at baseParse (@vue_compiler-sfc.js?v=9c64ce65:18235:15)
    at Object.parse$8 [as parse] (@vue_compiler-sfc.js?v=9c64ce65:24158:10)
    at parse$7 (@vue_compiler-sfc.js?v=9c64ce65:25039:24)
    at extractComponentInfo (utils.js:6:33)
    at Proxy.created (Example.vue?t=1707177222801:15:27)
extractComponentInfo @ utils.js:15
created @ Example.vue?t=1707177222801:15
callWithErrorHandling @ vue.js?v=9c64ce65:1652
callWithAsyncErrorHandling @ vue.js?v=9c64ce65:1660
callHook @ vue.js?v=9c64ce65:5060
applyOptions @ vue.js?v=9c64ce65:4979
finishComponentSetup @ vue.js?v=9c64ce65:9157
setupStatefulComponent @ vue.js?v=9c64ce65:9080
setupComponent @ vue.js?v=9c64ce65:9009
mountComponent @ vue.js?v=9c64ce65:7339
processComponent @ vue.js?v=9c64ce65:7305
patch @ vue.js?v=9c64ce65:6771
mountChildren @ vue.js?v=9c64ce65:7019
processFragment @ vue.js?v=9c64ce65:7235
patch @ vue.js?v=9c64ce65:6745
componentUpdateFn @ vue.js?v=9c64ce65:7449
run @ vue.js?v=9c64ce65:431
instance.update @ vue.js?v=9c64ce65:7573
setupRenderEffect @ vue.js?v=9c64ce65:7583
mountComponent @ vue.js?v=9c64ce65:7351
processComponent @ vue.js?v=9c64ce65:7305
patch @ vue.js?v=9c64ce65:6771
mountChildren @ vue.js?v=9c64ce65:7019
processFragment @ vue.js?v=9c64ce65:7235
patch @ vue.js?v=9c64ce65:6745
componentUpdateFn @ vue.js?v=9c64ce65:7449
run @ vue.js?v=9c64ce65:431
instance.update @ vue.js?v=9c64ce65:7573
setupRenderEffect @ vue.js?v=9c64ce65:7583
mountComponent @ vue.js?v=9c64ce65:7351
processComponent @ vue.js?v=9c64ce65:7305
patch @ vue.js?v=9c64ce65:6771
render2 @ vue.js?v=9c64ce65:8094
mount @ vue.js?v=9c64ce65:5368
app.mount @ vue.js?v=9c64ce65:11059
(anonymous) @ index.ts:5
Show 33 more frames
Show less
Example.vue:20 

问题原因 #

@vue/compiler-sfc的parse方法要求传入组件的字符串源码，但你传入的MyComponent是已经编译后的组件对象（比如通过import导入的组件实例），并非原始的.vue文件文本内容，这才导致了slice is not a function的错误——方法尝试对对象调用字符串的slice方法，自然会失败。

解决方案 #

1. 导入组件源码字符串（构建工具环境）

在Vite或Webpack中，可以通过特殊后缀直接导入.vue文件的原始文本：

// Vite环境下用?raw后缀导入源码
import MyComponentSource from './MyComponent.vue?raw';
import { parse } from '@vue/compiler-sfc';

const parsedComponent = parse(MyComponentSource).descriptor;

const template = parsedComponent.template?.content || '';
const script = parsedComponent.script?.content || '';
const style = parsedComponent.styles[0]?.content || '';

console.log('Template:', template);
console.log('Script:', script);
console.log('Style:', style);

2. 动态获取远程组件源码

如果组件是远程加载的，可以通过fetch获取.vue文件的文本内容后再解析：

import { parse } from '@vue/compiler-sfc';

async function getComponentSource(componentUrl) {
  const response = await fetch(componentUrl);
  const sourceText = await response.text();
  const descriptor = parse(sourceText).descriptor;
  
  return {
    template: descriptor.template?.content || '',
    script: descriptor.script?.content || '',
    style: descriptor.styles[0]?.content || ''
  };
}

// 调用示例
getComponentSource('/src/components/MyComponent.vue')
  .then(source => console.log('组件源码:', source));

关于遍历组件子元素的说明 #

遍历组件渲染后的子元素和属性的方式无法获取原始源码，因为组件编译后已经转换成了渲染函数和实例对象，原始的模板、脚本等源码信息在编译阶段就已经被处理，不会保留在运行时的组件实例中。

内容的提问来源于stack exchange，提问作者Michael