记一次编译错误

今天下午拉了一个老项目,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。编译通过。

总结

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