记一次编译错误

今天下午拉了一个老项目，npm install完毕后，却 run 不起来，控制台报错: 由于平时编译错误基本会精确到哪部分代码有问题，或者是xx依赖版本不合适。这次的却并不是很明显。我一来就先入为主，

• 首先直接认为是vue版本和vue-template-compiler版本对不上号导致的。于是查看了这俩依赖版本，发现是一样的2.5.17。
• 随后又觉得是版本低了，于是同时升级了到了2.6.0。结果还是编译失败，14个文件有相同错误。
• 然后又觉得是npm缓存，于是npm cache clean -f，结果依然无效。
  经过一系列无效无根据的尝试，问题没能解决，完全是小鹿乱撞。浪费了精力和时间。喝了一杯凉水后，重新审视控制台错误，发现一眼看上去报错不明显，但其实整个错误栈是明明白白在那儿的。 虽然有14个文件报错，但都是相同错误，想过找14个文件相同点，但那样不够精准，难以定位。于是仔细看了每一批错误的堆栈。发现具体报错的代码行数总是在这个组件的最后一行。

<Export
    :isNew="true"
    :query="{
        ...this.query,
    }"
    :exportOptions="exportOptions"
    :url="$api.user.storeApply.export"
/>

我先尝试注释了一个文件的这个组件，然后编译错误就少了一个。于是问题越来越清晰。最终定位到模板里的展开运算符(点点点)会导致编译失败。 随后注意到了错误堆栈反复出现的vue-template-es2015-compiler。经查询是专门为了 vue 模板语法支持新的es6特性。于是问题差不多明朗了， 手动升级vue-template-es2015-compiler从1.6到1.9.1。编译通过。

总结

有时候我们面对平时没有遇到过的问题，往往手忙脚乱，胡思乱想，很难意识到冷静分析才能快速解决问题。以后要时刻提醒自己： 解决问题的最好办法是直视问题，而不是投机取巧