同时安装Vue CLI2和Vue CLI3的方法

0. 前言

如果你想体验Vue CLI3的简洁清爽,又偶尔需要使用Vue CLI2,那这篇帖子就是你需要的。

配置方法改进于 同一台电脑 实现 vue-cli2和vue-cli3同时并存

原方法使用了直接修改文件名的方式,不够美观,破坏式的,改进后为透传调用。

修改:2019-08-14
原方法使用了直接修改文件名的方式,不够美观,破坏式的。如果需要更新cli版本,必须再次重命名./bin下的脚本。
改进后为透传调用,直接更新即可

1. 准备阶段

本方法的核心是使用非全局的方式安装Vue CLI
虽然对于安装位置没有要求,但为了方便维护,建议安装到nodejs的根目录下,本文就以nodejs默认安装目录C:\Program Files\nodejs为例

  • C:\Program Files\nodejs下依次创建如下目录:
    vue-cli 根目录,可以配置环境变量VUE_CLI_HOME为该目录
    vue-cli\vue2 Vue CLI 2工程目录
    vue-cli\vue3 Vue CLI 3工程目录
    vue-cli\bin Vue CLI最终可执行文件位置
  • 启动命令行,进入vue-cli目录,依次执行如下命令:
cd vue2
npm install -D vue-cli@2.x # 有cnpm的话,cnpm更快一点
cd ../vue3
npm install -D @vue/cli

这一步基本和原方法一致

2. 编写脚本

vue-cli\bin下创建如下文件:

  • vue-cli\bin\vue2.cmd Windows下的Vue CLI2脚本,内容如下
@setlocal
@echo off
"%~dp0..\vue2\node_modules\.bin\vue.cmd" %*
  • vue-cli\bin\vue3.cmd Windows下的Vue CLI3脚本,内容如下
@setlocal
@echo off
"%~dp0..\vue3\node_modules\.bin\vue.cmd" %*
  • vue-cli\bin\vue2 Linux下的Vue CLI2脚本,内容如下
#!/bin/sh

DIR=`dirname "$0"`
bash "${DIR}/../vue2/node_modules/.bin/vue" "$@"
  • vue-cli\bin\vue3 Linux下的Vue CLI3脚本,内容如下
#!/bin/sh

DIR=`dirname "$0"`
bash "${DIR}/../vue3/node_modules/.bin/vue" "$@"

因为node_modules/.bin/vuenode_modules\.bin\vue.cmd脚本的执行都依赖于相对路径,所以这里没有选择软连接的方式

如果只是使用Windows版的,后两个可以忽略,因为我安装了Win10自带的Ubuntu子系统,所以也就一起维护了

3. 配置环境变量

  • Windows

添加环境变量VUE_CLI_HOME,值为vue-cli的路径,这里就是C:\Program Files\nodejs\vue-cli
在环境变量Path中添加一条%VUE_CLI_HOME%\bin
Win7 是在Path的最前面追加%VUE_CLI_HOME%\bin;
修改完成后,重启命令行即可,PowerShell可能需要重启系统才好用

  • Linux(子系统时,环境变量是通用的,不用单独配置)

~/.bashrc(当前用户)或者/etc/profile(所有用户)中增加:

export VUE_CLI_HOME=xxx # Linux下Vue CLI多版本的安装原理相同,不再赘述
export PATH=$VUE_CLI_HOME:$PATH

保存之后,source ~/.bashrcsource /etc/profile重新加载修改的文件即可

4. 使用

任意位置,执行vue2或者vue3即可,分别对应Vue CLI2Vue CLI3

4.1 遇到的问题
  • 使用vue3 create hello-world报错如下:
npm ERR! Unexpected end of JSON input while parsing near '...">=0.8.0"}},"0.4.2":{'
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xionghf\AppData\Roaming\npm-cache\_logs\2019-08-12T08_31_52_399Z-debug.log
 ERROR  command failed: npm install --loglevel error

执行npm cache clean --force后再次创建,成功,应该是以前的缓存

5.更新

vue-cli\vue2vue-cli\vue3下重新执行cnpm install -D xxx即可