同时安装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/vue和node_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 ~/.bashrc或source /etc/profile重新加载修改的文件即可

4. 使用

任意位置，执行vue2或者vue3即可，分别对应Vue CLI2和Vue 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\vue2或vue-cli\vue3下重新执行cnpm install -D xxx即可

最后编辑于：2019.08.14 10:42:45