如何本地调试vue core源码

xiefl2025-03-16 18:40

对于想要在本地调试 vue core 源码的同学可以看看。

git clone vuejs/core仓库

下载本文调试的仓库 vuejs/core： github.com/vuejs/core

项目初始化

nvm add 22.14.0 安装 node 22

corepack pnpm install 安装指定版本的 pnpm

全局安装ni 工具（下一步会用到）： npm i -g @antfu/ni
本地启动 vue： nr dev: vue/dist目录下是实时构建的代码

新建 index.html

新建一个最简单的index.html页面，并引入vue.global.js，参考代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Simple HTML</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/packages/vue/dist/vue.global.js"></script>
    <script>
      const app = Vue.createApp({
        template: `
          <h1>{{ message }}</h1>
          <button @click="increment">Count is: {{ count }}</button>
        `,
        setup() {
          const message = Vue.ref("Hello Vue!");
          const count = Vue.ref(1);
          const increment = () => {
            count.value++;
          };
          return { message, count, increment };
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

注意，script引入的是本地的 vue.global.js 文件，需要设置一下 vite.config.js:

ts 复制代码

// vite.config.js
import path from "path";

export default {
  publicDir: path.resolve(__dirname, "../core/"),
};

本地预览和调试

上述步骤完成后，在index.html所属目录下运行 npx vite，打开预览链接：http://localhost:5173/

接下来，在代码文件加断点：packages/reactivity/src/ref.ts，刷新页面即可进入调试模式了

完。