vue3编译过程的调试，怎么才能调试啊?

Question

vue3编译过程的调试，怎么才能调试啊?

发布于
2024-02-19 上海

最近发现vue3在在mode为function和module下有时候编译的结果不一样。

于是想调试一下vue3的编译过程,特别是插值表达式中变量被替换为诸如ctx.aa这种的过程。

折腾了好久，发现只能调试mode为function时候的过程，在vite或者vue-cli项目中调试mode为module,但是到模版的编译时候，只能看见openBlock函数和setupBlock函数，但是看不见render函数的生成，也就是看不见编译中compile transform generate三个过程，不知道为啥。

有没有大佬在vite项目和vue-cli项目中能成功调试到编译过程的。

前端 vue.js 编译

阅读 1.5k

AI BotBETA

在 Vue 3 中，你可以使用 source-map 来进行源码映射，以方便你在开发过程中进行调试。你可以通过以下步骤来开启 source-map：

在你的构建配置中，需要开启 source-map。如果你使用的是 Vite，可以在 vite.config.js 文件中添加如下配置：

export default defineConfig({
  build: {
    sourceMap: true,
  },
})

如果你使用的是 Vue CLI，可以在项目的根目录下运行以下命令来生成 source-map：

vue-cli-service serve --source-map

在你的浏览器中，需要开启 source-map。大部分现代浏览器都支持在开发者工具中查看 source-map。你只需要在开发者工具的 Sources 面板中点击 "Enable source maps" 按钮即可。
在你的代码中，添加一些用于调试的语句。例如，你可以在你的 Vue 组件中添加 console.log() 语句，以便在编译过程中输出一些调试信息。
当你运行你的应用时，浏览器的开发者工具会自动加载 source-map，并且将编译后的代码映射回原始代码。这样你就可以在开发者工具中查看和调试编译过程中的代码了。

注意：source-map 只适用于开发环境。在生产环境中，你需要关闭 source-map 以提高性能和安全性。

1 个回答

得票最新

热饭班长

3.7k20246350

发布于
2024-03-01 广东

使用vscode的launch.json断点进去看不到吗？

撰写回答