Mac-升级-vue-3x-之前卸载-vue-296-失败的原因和解决方法

111次阅读

共计 1808 个字符,预计需要花费 5 分钟才能阅读完成。

之前安装了 vue 2.9.6 的版本,现在 vue 官方升级到了 3.x 版本,所以想卸载掉 2.9.6 的版本,安装 3.x 版本,结果输入官方给出的命令 npm uninstall vue-cli -g 却无法成功卸载,一直提示 up to time in 0.03s,然后百度和 Google 了好久,也没见到有效的解决方法,最终沉下心慢慢的研究,终于知道了原因,记录下来,方便遇到相同问题的人。
先介绍原因吧,可能大家都知道,npm 是 node 包管理器的简称(node package manager),在我们安装 node 的时候会一并安装。正常情况下,我们安装的 node 在 /usr/local/bin 目录下,而 npm 在 /usr/local/lib/node_modules 目录下,然后我们通过 npm 的全局命令安装的模块也在 /usr/local/bin 目录下(例如 npm install vue-cli -g),平时我们在终端里使用的 node --vesion 或者 vue --version 这种命令其实调用的就是 /usr/local/bin 中的命令。而我们使用 npm uninstall vue-cli -g 命令卸载 vue-cli 模块的时候,也是在这个目录去找,去卸载。
但是如果我们在已经安装 vue 的情况下再安装 nvm(node 版本管理器,node version manager),就会出问题,nvm 会改变 npm 全局安装模块的路径,我这边的路径变成了 ~/.nvm/versions/node/v10.15.1/bin,在安装 nvm 之后我再使用 npm 的全局安装命令安装的模块全都在这个目录下。那么我们使用 npm uninstall vue-cli -g 命令去卸载 vue 当然是不会成功的,因为它是在 ~/.nvm/versions/node/v10.15.1/bin 目录去卸载,而我们的 vue 安装在 /usr/local/bin 目录下。
那么知道了原因之后,就得解决问题了,下面的方法可能不是最好的,大家可以探索更好的方法。

  1. 删除 /usr/local/lib/node_modules 目录(谨慎选择,因为这个目录下可能还有其他地方用到的模块):sudo rm -rf /usr/local/lib/node_modules
  2. 删除 /usr/local/bin 下的 node:sudo rm /usr/local/bin/node
  3. 删除 /usr/local/bin 下的 vue:sudo rm /usr/local/bin/vue
  4. 删除 ~/.nvm 目录:sudo rm ~/.nvm
  5. 打开 ~/.bash_profile 文件:vi ~/.bash_profile
  6. 删除 .bash_profile 文件中跟 nvm 有关的部分:

    export NVM_DIR="$HOME/.nvm"
    [-s "$NVM_DIR/nvm.sh"] && \. "$NVM_DIR/nvm.sh" # This loads nvm
    [[-r $NVM_DIR/bash_completion]] && \. $NVM_DIR/bash_completion
  7. 使修改后的 .bash_profile 生效:source ~/.bash_profile
  8. 这时候在当前终端窗口里面应该仍然可以使用 nvm 命令,然后你关掉当前终端,重新打开终端输入 nvm 命令,应该已经会提示 command not found
  9. 重新安装 nvm(https://github.com/creationix…):curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
  10. 重新安装 node:nvm install --lts
  11. 重新安装 vue:npm install -g @vue/cli

这时候使用 vue --version 看到的应该是 3.x 的版本了。而这些命令所在的目录现在都是 ~/.nvm/versions/node/v10.15.1/bin。提示一下,要想看一个命令所在的目录,可以使用 which 命令,比如说 which vuewhich node,就会显示命令所在的目录。
最后,通过公众号“极课助手”去购买“极客时间”所有课程,可以获得高额返现,最高可返 51 元,如果想了解更多技术知识,可以关注“极课助手”公众号。

参考文献:

  1. https://my.oschina.net/oslph/…
  2. https://github.com/creationix…

正文完
 0