同時安裝Vue CLI2和Vue CLI3的方法

如果你想體驗vue cli3的簡潔清爽，又偶爾需要使用vue cli2，那這篇帖子就是你需要的。

配置方法改進於 同一臺電腦 實現 vue-cli2和vue-cli3同時並存

原方法使用了直接修改檔名的方式，不夠美觀，破壞式的，改進後為透傳呼叫。

修改：2019-08-14

原方法使用了直接修改檔名的方式，不夠美觀，破壞式的。如果需要更新cli版本，必須再次重新命名./bin下的指令碼。

改進後為透傳呼叫，直接更新即可

本方法的核心是使用非全域性的方式安裝vue cli

雖然對於安裝位置沒有要求，但為了方便維護，建議安裝到nodejs的根目錄下，本文就以nodejs預設安裝目錄c:\program files\nodejs為例

cd vue2

npm install -d [email protected] # 有cnpm的話，cnpm更快一點
cd ../vue3
npm install -d @vue/cli

這一步基本和原方法一致

@setlocal

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

@setlocal

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

#!/bin/sh

dir=dirname "$0"

bash 「dir

/../

vue2

/nod

emod

ules

/.bi

n/vu

e"

"/../vue2/node_modules/.bin/vue" "

dir/..

/vue

2/no

dem​

odul

es/.

bin/

vue"

"@」

#!/bin/sh

dir=dirname "$0"

bash 「dir

/../

vue3

/nod

emod

ules

/.bi

n/vu

e"

"/../vue3/node_modules/.bin/vue" "

dir/..

/vue

3/no

dem​

odul

es/.

bin/

vue"

"@」

因為node_modules/.bin/vue和node_modules\.bin\vue.cmd指令碼的執行都依賴於相對路徑，所以這裡沒有選擇軟連線的方式

如果只是使用windows版的，後兩個可以忽略，因為我安裝了win10自帶的ubuntu子系統，所以也就一起維護了

在環境變數path中新增一條%vue_cli_home%\bin

win7 是在path的最前面追加%vue_cli_home%\bin;

修改完成後，重啟命令列即可，powershell可能需要重啟系統才好用

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

export vue_cli_home=*** # linux下vue cli多版本的安裝原理相同，不再贅述

export path=$vue_cli_home:$path

任意位置，執行vue2或者vue3即可，分別對應vue cli2和vue cli3

4.1 遇到的問題

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
-cache\_logs\2019-08
-12t08_31_52_399z-debug.log
error  command failed: npm install --loglevel error

執行npm cache clean --force後再次建立，成功，應該是以前的快取

在vue-cli\vue2或vue-cli\vue3下重新執行cnpm install -d ***即可

vue cli2 建立專案

安裝node 可選用node 10版本，相容vue cli2，vue cli3 node v 檢視node版本 node10.22.1 npm v 檢視npm版本 npm 6.14.6 vue cli2文件 cnpm install g vue cli vue init webpack 資料夾名 w...

vue cli2 打包全配置

vue cli2 打包全配置 將vue 全部打包分離出去 減小limit 過大的不去打包成base64 webpack.base module.exports module utils if options.extract webpack.prod output index dev various ...

從零開始搭建乙個Vue專案vue cli2

vue.js是現在比較優秀的web前端框架，下面開始從零開始搭建乙個vue專案。流程如下 安裝過程沒有什麼要注意的地方，直接安裝到自己想安裝到的目錄裡面就可以了 2.安裝完成以後，開啟命令列，輸入node v 來判斷是否安裝成功 3.在安裝node的時候，npm包管理器會自動安裝，我們在命令輸出 n...