（超详细）在同一设备下安装不同版本的vue脚手架笔记

丘耳
456 阅读2分钟

在这里我实现安装三个不同版本的 vue 脚手架，分别为：2.9.6 、 3.11.0 、 4.5.0

因为全局安装只能安装一个版本，所以这里我选择统一局部安装。

1. 在任意目录下新增如下三个文件夹（注：路径不要包含中文名）

├── vue2
├── vue3
└── vue4

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a0af7faa8ccc470abf43b4799db38bd0~tplv-k3u1fbpfcp-watermark.image?)

2. 在对应目录下安装对应版本的 vue 脚手架：

  • 打开 cmd 窗口
  • 进入 vue2 文件夹目录下，执行安装命令 npm install vue-cli@2.9.6
    • image.png
    • 在 node_modules/.bin 文件夹下，找到 vue.cmd 和 vue 两个文件，更名为 vue2.cmd 和 vue2
    • 配置系统环境变量：
      • 打开电脑的环境变量
      • 新建变量
      • 变量名随意，如：aaa，根据个人喜好命名即可，这里为了命名为 vue2
      • 变量值为安装vue-cli2下的 node_modules/.bin 的完整路径
      • 然后将刚刚新建的变量 vue2 添加到 path 中，格式为 %vue2%
  • 进入 vue3 文件夹目录下，执行安装命令 npm install @vue/cli@3.11.0
    • 进入 vue3 目录下的命令同进入vue2一样，cd 你的文件夹路径
    • 在 node_modules/.bin 文件夹下，找到 vue.cmd 和 vue 两个文件，更名为 vue3.cmd 和 vue3
    • 配置系统环境变量：
      • 打开电脑的环境变量
      • 新建变量
      • 变量名随意，如：aaa，根据个人喜好命名即可，这里为了命名为 vue3
      • 变量值为安装vue-cli3下的 node_modules/.bin 的完整路径
      • 然后将刚刚新建的变量 vue3 添加到 path 中，格式为 %vue3%
  • 进入 vue4 文件夹目录下，执行安装命令 npm install @vue/cli@4.5.0
    • 进入目录同上
    • 在 node_modules/.bin 文件夹下，找到 vue.cmd 和 vue 两个文件，更名为 vue4.cmd 和 vue4
    • 配置系统环境变量：
      • 打开电脑的环境变量
      • 新建变量
      • 变量名随意，如：aaa，根据个人喜好命名即可，这里为了命名为 vue4
      • 变量值为安装vue-cli4下的 node_modules/.bin 的完整路径
      • 然后将刚刚新建的变量 vue4 添加到 path 中，格式为 %vue4%
  • image.png

3. 查看验证是否完成

  • 再 cmd 窗口分别输入 vue2 -V 、 vue3 -V 、 vue4 -V 查看对应安装版本
  • image.png

4. 关于 Vue CLI 4 说明下：

  • Vue CLI 4.5以下，对应的是Vue2
  • Vue CLI 4.5及以上，对应的是Vue3，当然，创建项目的时候可以选择Vue2

5. 问题记录

5.1 使用 vue2 初始化项目时报错

【问题】

D:\dataTest\testVueCliDemo>vue2 init webpack demo01

   vue-cli · Failed to download repo vuejs-templates/webpack: getaddrinfo ENOTFOUND codeload.github.com

【解决方案】

  • 清除 Vue CLI 的缓存 
    •   D:\dataTest\testVueCliDemo>npm cache clean --force
  
    npm WARN using --force I sure hope you know what you are doing.
  • 删除 .vuerc 文件，文件名目录：C:\Users\<Your Username>\.vuerc
  • 在尝试初始化项目的命令
avatar
文章
阅读
粉丝