0. 前言

如果你想體驗Vue CLI3的簡潔清爽抢韭，又偶爾需要使用Vue CLI2份蝴，那這篇帖子就是你需要的驹尼。

配置方法改進于 同一臺電腦 實現(xiàn) vue-cli2和vue-cli3同時并存

原方法使用了直接修改文件名的方式，不夠美觀晚顷，破壞式的峰伙，改進后為透傳調(diào)用。

修改：2019-08-14
原方法使用了直接修改文件名的方式该默，不夠美觀瞳氓，破壞式的。如果需要更新cli版本栓袖，必須再次重命名./bin下的腳本匣摘。
改進后為透傳調(diào)用，直接更新即可

1. 準備階段

本方法的核心是使用非全局的方式安裝Vue CLI
雖然對于安裝位置沒有要求裹刮，但為了方便維護恋沃，建議安裝到nodejs的根目錄下，本文就以nodejs默認安裝目錄C:\Program Files\nodejs為例

• 在C:\Program Files\nodejs下依次創(chuàng)建如下目錄：
  vue-cli 根目錄必指，可以配置環(huán)境變量VUE_CLI_HOME為該目錄
  vue-cli\vue2 Vue CLI 2工程目錄
  vue-cli\vue3 Vue CLI 3工程目錄
  vue-cli\bin Vue CLI最終可執(zhí)行文件位置
• 啟動命令行囊咏，進入vue-cli目錄，依次執(zhí)行如下命令：

cd vue2
npm install -D vue-cli@2.x # 有cnpm的話塔橡，cnpm更快一點
cd ../vue3
npm install -D @vue/cli

這一步基本和原方法一致

2. 編寫腳本

在vue-cli\bin下創(chuàng)建如下文件：

• vue-cli\bin\vue2.cmd Windows下的Vue CLI2腳本梅割，內(nèi)容如下

@setlocal
@echo off
"%~dp0..\vue2\node_modules\.bin\vue.cmd" %*

• vue-cli\bin\vue3.cmd Windows下的Vue CLI3腳本，內(nèi)容如下

@setlocal
@echo off
"%~dp0..\vue3\node_modules\.bin\vue.cmd" %*

• vue-cli\bin\vue2 Linux下的Vue CLI2腳本葛家，內(nèi)容如下

#!/bin/sh

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

• vue-cli\bin\vue3 Linux下的Vue CLI3腳本户辞，內(nèi)容如下

#!/bin/sh

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

因為node_modules/.bin/vue和node_modules\.bin\vue.cmd腳本的執(zhí)行都依賴于相對路徑，所以這里沒有選擇軟連接的方式

如果只是使用Windows版的癞谒，后兩個可以忽略底燎，因為我安裝了Win10自帶的Ubuntu子系統(tǒng)刃榨，所以也就一起維護了

3. 配置環(huán)境變量

• Windows

添加環(huán)境變量VUE_CLI_HOME，值為vue-cli的路徑双仍，這里就是C:\Program Files\nodejs\vue-cli
在環(huán)境變量Path中添加一條%VUE_CLI_HOME%\bin
Win7 是在Path的最前面追加%VUE_CLI_HOME%\bin;
修改完成后枢希，重啟命令行即可，PowerShell可能需要重啟系統(tǒng)才好用

• Linux（子系統(tǒng)時朱沃，環(huán)境變量是通用的苞轿，不用單獨配置）

在~/.bashrc(當前用戶)或者/etc/profile(所有用戶)中增加：

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

保存之后逗物，source ~/.bashrc或source /etc/profile重新加載修改的文件即可

4. 使用

任意位置搬卒，執(zhí)行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

執(zhí)行npm cache clean --force后再次創(chuàng)建翎卓，成功契邀，應該是以前的緩存

5.更新

在vue-cli\vue2或vue-cli\vue3下重新執(zhí)行cnpm install -D xxx即可