Vue项目启动时报If you are using vue-loader@>=10.0, simply update vue-template-compiler

1,673 阅读2分钟

前言:

今天在将一个项目从git上clone下来之后,按照惯例,安装完依赖包,执行npm run serve后就能正常启动了,可是偏偏遇到了一个问题,虽然解决方法虽然很简单,还是想分享出来。

一、遇到的报错信息

image.png

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

二、原因

根据报错信息可知,这个报错是由于vuevue-template-compiler版本不匹配导致的。
这里提到的 vue-loader 和 vue-template-compiler 是 Vue.js 项目中用于处理 .vue 文件的两个重要依赖。

三、解决方法

  1. 检查package.json文件中vuevue-template-compiler的版本是否一致。

image.png

注:如果出现上面的报错,即使一致,也要进行下面的操作。(因为我这里就是一致的,但也报错了)

  1. vue-template-compiler依赖删掉,执行的命令如下:
npm uninstall vue-template-compiler
  1. 然后重新安装:
npm i vue-template-compiler@2.6.14 --save-dev
  1. 安装成功后重新启动即可————大功告成!

看到这里就已经解决问题了,下面是找到解决方案的过程,着急解决问题的同学可先到这里。

四、试过的方案

在此记录下试过的方案,现在想想当时也是无脑了。

  1. clone下来后,npm install是成功的,所以出现报错的时候,检查package.json文件中————vuevue-template-compiler两个依赖的版本是一致才,就想当然的以为可能node_modules包有问题,于是删包,重新install,结果就是失败了。
  2. 第二次以为是受package-lock.json文件的影响,于是把package-lock.json文件删掉了,然后删包,重新install,结果依旧是失败的。
  3. 最后忽然想到,单独删vue-template-compiler这个包吧,虽然版本号显示是一致的,但是卸载了重新装一遍试试,然后就成功了。

后来搜了一下这个问题的原因,大家都在说是因为版本不一致导致的,而且很多人出现这个问题也都是因为版本不一致,所以就想将这个小小的问题记录一下,万一有人跟我一样犯糊涂了呢。

其实版本不一致很好理解,只不过我这边是版本一致,导致我下意识以为node_modules包的问题,尴尬了……

五、总结

有时候小小的问题,可能也不是秒解,更何况大脑也有不在线的时候呢?有时候报错信息一致,可能导致它出现的原因也不一样,就是要针对项目找出解决方案。

以上,希望对大家有帮助!