前端调试系列三 vue + vite web项目

创建vue项目

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

能成功运行即可

pnpm run dev

下载vue源码

vue仓库地址, 新开一个目录将源码下载下来

配置vue构建产物

下载依赖后 设置下环境变量，即可构建出带sourcemap的产物

pnpm i
export SOURCE_MAP=true 
pnpm run build

但是此时构建的路径不太对，对vue的构建代码稍作修改

// lib\vue-core\rollup.config.js
output.sourcemapPathTransform = (relativeSourcePath, sourcemapPath) => {
    const newSourcePath = path.join(path.dirname(sourcemapPath), relativeSourcePath);
    return newSourcePath;
}

再次构建后路径就为对应的绝对地址了

npm link到对应的源码

cd 你的vue项目的根路径下
pnpm link /对应的磁盘路径/learn-debug/lib/vue-core/packages/vue

配置vite

避免预构建后的路径问题，将vue禁止预构建

// web\test-vue-vite-debug\vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // other config
  optimizeDeps: {
    exclude: ['vue']
  }
})

配置 vscode

以vue项目为根路径打开vscode

配置 launch.json

{
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:vite项目运行的端口号",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

运行项目

pnpm dev

点击即可在vscode中进行断点

可以看到此时就是对本地下载下来的vue源码的断点