# vue源码调试

# 生成sourcemap文件

在package.json中添加2个命令，打包带sourcemap的vue文件。

vue.js采用的rollup打包，打包入口为scripts/config.js。阅读入口代码，即可知道，只需修改环境变量--environment的值，即可打包不同模式的vue.js文件。

"scripts": {
    "build:esm:sourcemap": "rollup -c scripts/config.js --environment TARGET:web-full-esm  --sourcemap",
    "build:full:sourcemap": "rollup -c scripts/config.js --environment TARGET:web-full-dev  --sourcemap",
}

1
2
3
4

或者在genConfig函数中添加如下代码，这样，所有的vuejs产出文件都会带有sourcemap。

output: {
  sourcemap: true, // rollup配置，生成sourcemap文件
}

1
2
3

在scripts/config.js中，关于所有可输出的vue版本，均可在builds对象中找到：

# 调试中使用带sourcemap的vue文件

如果你是使用@vue/cli创建的项目，那么只需要在vue.config.js中添加如下配置：

const path = require('path');
const resolve = dir => path.join(__dirname, dir);
module.exports = {
  devServer: {
    port: 9000
  },
  configureWebpack: config => {
		// 1、启用sourcemap
    config.devtool = 'source-map';
  },
  chainWebpack: config => {
    // 2、配置vue，使用本地vue.js代码
    config.resolve.alias
      // .set("vue$", resolve("vue/dist/vue.js"))
      .set("vue$", resolve("vue/dist/2.6.14/vue.esm.js"))
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如果是自己使用webpack搭建的脚手架，添加如下配置：

const resolve = dir => path.join(__dirname, dir);
module.exports = {
  //...
  devtool: 'source-map', // 1、启用sourcemap
  resolve: {
    alias: {
       // 2、配置vue，使用本地vue.js代码
      'vue$': resolve("vue/dist/2.6.14/vue.esm.js"),
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11

此时，我们启动项目，就可以正常调试vue源码了。

# FAQ

如果遇到 Failed to execute... node-gyp.js类似的错误，安装依赖时，加上sudo。原因参照这篇文章：gyp ERR!与node-pre-gyp ERR!报错解决 (opens new window)。

sudo yarn install --unsafe-perm

Vue响应式原理 →