如何查看Vue SFC生成的源码？Storybook调试遇初始化错误

查看编译后代码的可行方法 #

方法1：利用Storybook浏览器调试工具 #

1. 确保Storybook配置（.storybook/main.js）开启source map：

module.exports = {
  webpackFinal: async (config) => {
    config.devtool = 'source-map';
    return config;
  },
};

2. 启动Storybook后打开浏览器开发者工具，切换到Sources面板
3. 在左侧目录找到webpack://下的./src/SurveyPage.vue，展开即可查看编译后的JS文件，直接定位报错行号对应的内容。

方法2：手动编译Vue SFC #

1. 根据Vue版本安装对应编译工具：

# Vue3
npm install @vue/compiler-sfc -D
# Vue2
npm install vue-template-compiler -D

2. 创建编译脚本compile-sfc.js（以Vue3为例）：

const { compileScript, compileTemplate, parse } = require('@vue/compiler-sfc');
const fs = require('fs');

const sfcContent = fs.readFileSync('./src/SurveyPage.vue', 'utf8');
const { descriptor } = parse(sfcContent);

// 输出编译后的脚本内容
const scriptResult = compileScript(descriptor);
console.log('编译后的脚本:\n', scriptResult.content);

// 输出编译后的模板渲染函数
const templateResult = compileTemplate({
  source: descriptor.template.content,
  filename: 'SurveyPage.vue',
});
console.log('\n编译后的模板渲染函数:\n', templateResult.code);

3. 运行脚本查看结果：

node compile-sfc.js

排查报错根源 #

这个错误本质是let/const变量在声明语句之前被访问，常见场景：

• 脚本中提前引用未声明的变量：

<script setup>
console.log(backgroundColor); // 报错位置
const backgroundColor = getBgColor();
</script>

• 条件块内部先使用变量再声明：

<script setup>
if (props.isDark) {
  applyBg(backgroundColor); // 报错
  const backgroundColor = '#000';
}
</script>

通过编译后的代码找到backgroundColor的相关逻辑，就能快速定位原SFC中变量声明顺序的问题。

关于vue-tsc的问题说明 #

vue-tsc仅用于TypeScript类型检查，不支持输出编译后的JS代码。单独指定.vue文件运行报错，是因为它需要依赖tsconfig.json的配置：在tsconfig.json的include数组中添加.vue文件后，运行vue-tsc --noEmit可做类型检查，但这无法帮助查看编译后的代码，还是用前面的方法更直接。

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