Vue源码调试方法

为了方便我们阅读Vue的源码，可以修改Vue的打包命令，生成对应的sourcemap文件。调试时，就可以根据soucemap定位到vue源码中具体位置。

本地打包sourcemap

从github上下载Vue源码 (opens new window)，切换到某个稳定的版本，比如2.6.12。然后添加新的打包命令，用于生成带sourcemap的vue文件。我们在package.json中添加2个命令，用于生成umd和esm版本的Vue源码。

完整版本：rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap esm版本：rollup -w -c scripts/config.js --environment TARGET:web-full-esm --sourcemap

Vue是基于rollup打包的，我们可以通过命令行参数--sourcemap来生成带sourcemap的文件，详细可参考rollup文档 (opens new window)，修改后的package.json文件如下

{
  "name": "vue",
  "version": "2.6.12",
  "sideEffects": false,
  "scripts": {
    "dev:source:full": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap",
    "dev:source:esm": "rollup -w -c scripts/config.js --environment TARGET:web-full-esm --sourcemap",
    "commit": "git-cz"
  }
}

执行npm run dev:source:full或者dev:source:esm即可生成.map文件。

使用方法

在Vue-cli中使用

使用vue-cli命令生成一个项目，将上一步生成的vue.js、vue.esm.js以及对应的map文件，拷贝到项目中

2、修改vue.config.js文件，将vue$指向本地的Vue文件.

const path = require('path');
const resolve = dir => path.join(__dirname, dir);
module.exports = {
  devServer: {
    port: 9000
  },
  configureWebpack: config => {
    config.devtool = 'source-map';
  },
  chainWebpack: config => {
    config.resolve.alias
      // full版本
      // .set("vue$", resolve("vue/dist/vue.js"))
      // esm版本
      .set("vue$", resolve("vue/dist/vue.esm.js"))
  }
};

这样，我们在执行代码的时候，就可以在保持vue代码结构的情况下，同步调试。

通过script标签引入

将vue.js及vue.js.map文件拷贝到目录下，通过script标签直接引入Vue文件即可，例如：<script src="../../dist/vue.js"></script>的方式引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>

</head>
<body>
    <div id="app">
        {{ msg }}
    </div>
    <script>
        new Vue({
            data() {
                return {
                    msg: 'hello'
                }
            }
        }).$mount('#app');
    </script>
</body>
</html>