【vue深入】排查依赖找不到的问题,就很硬核

2,224 阅读3分钟

小知识,大挑战!本文正在参与“  程序员必备小知识  ”创作活动

本文同时参与 「掘力星计划」  ,赢取创作大礼包,挑战创作激励金

前言

佛祖保佑, 永无bug。Hello 大家好!我是海的对岸!

快速搭建vue项目 文档传送门

这次的问题体现在,我在引入vue-echarts时,报了个错, 然后闹了个乌龙,记录下解决问题的方法

发现报错

项目跑起来报错(解决过程)

image.png

报错信息,提示依赖找不到,那我看了下node_modules里面,确实没有这个找到这个缺的插件

解决这个问题,这里有个小插曲(回头看,这个问题其实挺狗血的,就是看错了,但是也解决了,只是解决过程比较硬核)

a. 因为我安装依赖的时候没有停下项目,而是直接新开了一个终端,安装依赖的,结果报了这个错,因为我快速创建出来的项目,我看了下,还是基于vue2

image.png

这个错误我以前没碰到过,我猜测是不是依赖里面有些不对劲(以前安装依赖,没经验,有的依赖是 npm 安装的,有的是 yarn 安装的,所以当时出现依赖找不到的情况,解决方法是:是 1,停下项目,重启。2,删除掉所以的依赖,重新 npm install 或者 yarn)

后来有vue官方文档推荐都用yarn命令,所以这次安装依赖,我全程用yarn,结果还是不行

b. 那就按照提示,安装相应的依赖吧

yarn add --save @vue/composition-api -D

不知道是不是我今天运气比较背,我执行上面的命令,他说模块找不到

我解决完问题写这篇文章的时候,才发现,是命令行敲错了,上面的命令行 多了 --save

但是我这次解决完问题的方法并不是重新 输入对的命令 yarn add @vue/composition-api -D,这个应该是对的命令。我这次是采用简单粗暴 一梭子开干的方法

我先去百度搜 yarn add --save @vue/composition-api -D 命令(错误的命令),然后找到@vue/composition-apigithub地址,下载了下来(终端提示缺啥,咱就去找啥,这很合理,对吧)

image.png

image.png

终端,进入composition-api文件夹,执行

yarn --registry=https://registry.npm.taobao.org

然后再命令行里执行

yarn build

会生成一个 dist 目录,这个目录里的文件和 yarn add @vue/composition-api 生成的目录里的dist目录里的文件一样

ps:

1、@vue/composition-api 源码库里的 package.json 里的 build 命令里使用的打包工具是 rollup

最后,解决报错

这个时候,再把我们的vue项目重新启动下,报错问题解决

image.png

个人友情提示

  • 如果在正式项目中,发现错误是命令行敲错了,那就输入正确的命令行操作,我这个粗暴的方法虽然能解决问题,但是如果说项目代码提交到 git 或者 svn 的时候,其实我这个 @vue/composition-api 并不在 package.json中,如果别人拉取了我的代码,他跑起来就是会报错的,项目拉取下来,安装依赖的时候,是根据package.json里面的依赖项进行下载的。

  • 那我这种简单粗暴的方法怎么补救呢?也很简单,在package.json中,把这个依赖加进去就行了,这样提交代码之后,别人也能拉取到这个依赖,yarn 一下,项目也能正常跑起来

image.png

手动在 package.jsondevDependencies中,添加上 @vue/composition-api

image.png

vscode 还自动提示了版本号,贴心

image.png

都看到这里了,求各位观众大佬们点个赞再走吧,你的赞对我非常重要