在Vue項(xiàng)目開發(fā)過程中，我們常常會遇到同時維護(hù)Vue2和Vue3項(xiàng)目的情況。由于不同版本的Vue對Node.js 版本的要求有所差異，這就使得Node.js 版本管理成為了一個關(guān)鍵問題。NVM（Node Version Manager）作為一款強(qiáng)大的Node.js 版本管理工具，能夠幫助我們輕松地在不同版本之間進(jìn)行切換，極大地提高開發(fā)效率。接下來，本文將詳細(xì)介紹如何使用NVM來管理Node.js 版本，以滿足Vue2和Vue3項(xiàng)目的開發(fā)需求。

在Vue項(xiàng)目開發(fā)過程中，我們常常會遇到同時維護(hù)Vue2和Vue3項(xiàng)目的情況。由于不同版本的Vue對Node.js 版本的要求有所差異，這就使得Node.js 版本管理成為了一個關(guān)鍵問題。NVM（Node Version Manager）作為一款強(qiáng)大的Node.js 版本管理工具，能夠幫助我們輕松地在不同版本之間進(jìn)行切換，極大地提高開發(fā)效率。接下來，本文將詳細(xì)介紹如何使用NVM來管理Node.js 版本，以滿足Vue2和Vue3項(xiàng)目的開發(fā)需求。

一、為什么需要使用NVM

Vue2和Vue3在技術(shù)架構(gòu)和性能優(yōu)化上有很大的不同，這導(dǎo)致它們對Node.js 版本的要求也不盡相同。Vue3在很多新特性的實(shí)現(xiàn)上依賴于較新的Node.js 版本，而一些Vue2項(xiàng)目可能由于兼容性等原因，更適合在特定的舊版本Node.js 環(huán)境下運(yùn)行。如果沒有有效的版本管理工具，每次在不同項(xiàng)目間切換時，都需要卸載并重新安裝相應(yīng)版本的Node.js ，這不僅繁瑣，還容易出現(xiàn)環(huán)境配置錯誤等問題。NVM的出現(xiàn)，很好地解決了這一困擾，它允許我們在同一臺機(jī)器上安裝多個Node.js 版本，并能快速切換，確保每個項(xiàng)目都能在合適的Node.js 環(huán)境中穩(wěn)定運(yùn)行。

二、使用NVM切換Node版本的步驟

（一）完全刪除之前的Node及npm

在安裝NVM并切換Node版本之前，需要先將之前安裝的Node及npm徹底清理干凈，包括應(yīng)用程序、緩存文件以及環(huán)境變量。具體操作如下：

1. 清除npm緩存：打開cmd命令窗口，輸入 npm cache clean --force 并回車執(zhí)行，以清除npm緩存。
2. 卸載Node.js 應(yīng)用程序：打開“程序與功能”卸載界面，找到“node.js ”，點(diǎn)擊卸載。
3. 刪除相關(guān)環(huán)境變量：打開環(huán)境變量設(shè)置窗口，檢查并刪除所有與Node相關(guān)的環(huán)境變量。卸載完成后，可以在命令行中輸入 npm -v 和 node -v 查看是否還有殘留版本信息，之后最好重啟一下電腦，確保卸載徹底。

（二）安裝NVM

1. 下載安裝包：從官網(wǎng)（https://github.com/coreybutler/nvm-windows/releases ）下載適合Windows系統(tǒng)的NVM安裝包。

   

2. 以管理員身份安裝：下載完成后，右鍵點(diǎn)擊安裝包，選擇“以管理員身份打開”，然后按照安裝向?qū)У奶崾具M(jìn)行安裝。在安裝過程中，需要選擇NVM的安裝路徑以及Node.js 的安裝路徑，用戶可以根據(jù)自己的需求進(jìn)行選擇。指定一個默認(rèn)的安裝位置 (D:\nvm\nvm-install) 和nodejs的位置 (D:\nvm\nodejs)，這個路徑上下文要統(tǒng)一。

（三）安裝Node.js 版本

1. 查看可用版本：安裝完成NVM后，以管理員身份打開cmd命令窗口，輸入 nvm list available 命令，查看當(dāng)前可下載的Node.js 版本列表。一般建議安裝LTS（長期支持）版本，以確保穩(wěn)定性。

2. 安裝指定版本：根據(jù)項(xiàng)目需求，選擇需要安裝的Node.js 版本進(jìn)行下載安裝。例如，咱們的項(xiàng)目若要安裝針對vue2的Node.js 16.13.1和針對vue3的node.js 18.14.2版本，在命令行中分別輸入 nvm install 16.13.1 和 nvm install 18.14.2 ，等待下載和安裝完成。

   

   

   在我們對應(yīng)的目錄下已經(jīng)安裝了對應(yīng)版本的node.js，如下圖所示。

   

（四）替換NVM自動下載的Node包（可選）

由于NVM自動下載的Node包可能存在問題，我們可以到Node.js 的官網(wǎng)上將相應(yīng)版本的Node包下載下來，替換掉NVM目錄下的對應(yīng)版本的Node包。Node.js 官方下載地址：https://nodejs.org/zh-cn/download/releases/ 。

（五）檢查安裝是否成功

安裝完成后，重啟電腦，再次以管理員身份打開cmd命令窗口，輸入 nvm list 命令。如果出現(xiàn)之前安裝的Node.js 版本列表，則說明NVM安裝及Node.js 版本安裝均成功。

（六）切換Node版本

在不同的Vue項(xiàng)目開發(fā)中，根據(jù)項(xiàng)目對Node.js 版本的要求，使用以下命令進(jìn)行版本切換：nvm use [version]，例如，若要切換到Node.js 18.14.2版本，在命令行中輸入 nvm use 18.14.2 即可。如果切換過程中出現(xiàn)亂碼問題，可以嘗試再次以管理員身份打開cmd命令窗口，重新執(zhí)行切換命令。

我們再執(zhí)行nvm list，可以看到前面帶*的就是當(dāng)前正在使用的node版本。

執(zhí)行npm config set registry https://registry.npmmirror.com 使用這個命令安裝鏡像源。

此時使用vue命令會提示找不到此命令，使用 npm install -g @vue/cli 命令安裝vue命令。

這一步很重要：在系統(tǒng)變量的 Path 中配置環(huán)境變量 D:\nvm\nodejs\node_global，不然會提示找不到node命令

（七）nvm切換國內(nèi)鏡像

如果下載node過慢或者安裝失敗，請更換國內(nèi)鏡像源, 在 nvm 的安裝路徑下，找到 settings.txt，設(shè)置node_mirro與npm_mirror為國內(nèi)鏡像地址。下載就飛快了
nvm npm_mirror https://npmmirror.com/mirrors/npm/
nvm node_mirror https://npmmirror.com/mirrors/node/
或者：
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

命令行切換(注意：請切換國內(nèi)鏡像后再安裝node版本，否則會很慢)

阿里云鏡像

nvm npm_mirror https://npmmirror.com/mirrors/npm/
nvm node_mirror https://npmmirror.com/mirrors/node/

騰訊云鏡像

nvm npm_mirror http://mirrors.cloud.tencent.com/npm/
nvm node_mirror http://mirrors.cloud.tencent.com/nodejs-release/

打開鏈接查看可以node版本：https://registry.npmmirror.com/binary.html?path=node/

nvm默認(rèn)安裝后，還可以通過修改他的配置文件，來配置nvm下載node和npm的下載路徑。

打開nvm的安裝目錄，雙擊settings.txt

添加如下路徑后保存（指定如下路徑，下載node和npm時會更快）

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

三、配置全局安裝的模塊路徑和緩存路徑

1、在nvm的安裝目錄下創(chuàng)建如下空目錄

2、創(chuàng)建完兩個文件夾后，在cmd窗口中輸入以下命令

雙引號中的路徑是上一步中創(chuàng)建的兩個文件夾的路徑

npm config set prefix "D:\nvm\nvm-install\node_global"
npm config set cache "D:\nvm\nvm-install\node_cache"

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

4、全局安裝yarn

npm install yarn -g

給yarn設(shè)置淘寶鏡像，剛安裝yarn，執(zhí)行下面命令會報(bào)錯，可以重新打開命令行窗口執(zhí)行。

yarn config set registry http://registry.npm.taobao.org/

查看鏡像

yarn config get registry

四、NVM常用命令總結(jié)

• nvm list [available]：列出已經(jīng)安裝的Node.js 版本；添加 available 參數(shù)，可顯示可下載版本的部分列表，此命令也可簡寫為 nvm ls [available]。
• nvm install [version][arch]：安裝指定版本的Node.js ，[arch] 可選參數(shù)用于指定安裝32位或64位版本（默認(rèn)為系統(tǒng)當(dāng)前架構(gòu)）。在命令后面添加 –insecure，可以繞過遠(yuǎn)端下載服務(wù)器的SSL驗(yàn)證。
• nvm uninstall [version]：卸載指定版本的Node.js 。
• nvm use [version][arch]：切換到使用指定的Node.js 版本，同樣可指定32/64位 [arch]。
• nvm on：啟用Node.js 版本管理。
• nvm off：禁用Node.js 版本管理（不卸載任何東西）。
• nvm proxy [url]：設(shè)置用于下載的代理。留 [url] 空白，可查看當(dāng)前的代理；設(shè)置 [url] 為 none 則刪除代理。
• nvm node_mirror [url]：設(shè)置Node鏡像，默認(rèn)為https://nodejs.org/dist/ ，也可以設(shè)置為淘寶的鏡像https://npm.taobao.org/mirrors/node/ 。
• nvm npm_mirror [url]：設(shè)置npm鏡像，默認(rèn)為https://github.com/npm/npm/archive/ ，也可以設(shè)置為淘寶的鏡像https://npm.taobao.org/mirrors/npm/ 。
• nvm version：顯示當(dāng)前運(yùn)行的NVM版本，可簡寫為 nvm v。

五、NVM切換Node版本常見問題

在使用NVM切換Node版本時，常見的問題及解決方法如下：

（一）切換版本后亂碼

• 權(quán)限不足：這是最常見的導(dǎo)致亂碼的原因。

  • 解決方法：找到命令提示符（即cmd），右鍵點(diǎn)擊“更多”，選擇“以管理員身份運(yùn)行”，然后再使用 nvm use 命令來切換版本。也可以右鍵點(diǎn)擊開始菜單按鈕，選擇“Windows PowerShell(管理員)”，在其中執(zhí)行 nvm use [node版本號] 命令。

• 路徑問題：nvm安裝路徑包含中文或空格，可能會導(dǎo)致亂碼問題。

  • 解決方法：首先從系統(tǒng)中卸載干凈node和nvm，然后重新安裝nvm，安裝路徑和node路徑不能帶有中文和空格，建議在C盤下新建文件夾，并將nvm和node都安裝在其中，重新安裝后即可解決。同時，還需檢查 setting.txt 文件里面的路徑是否與實(shí)際安裝路徑一致。

（二）切換版本無效

• 未正確安裝nvm或nodejs：nvm或nodejs安裝過程中出現(xiàn)問題，可能導(dǎo)致版本切換無效。

  • 解決方法：卸載nvm和nodejs后，重新進(jìn)行安裝，安裝時確保按照正確步驟操作。

• 環(huán)境變量配置不正確：環(huán)境變量配置錯誤，nvm無法正確識別和切換版本。

  • 解決方法：打開設(shè)置系統(tǒng)，進(jìn)入“系統(tǒng)信息”，點(diǎn)擊“高級系統(tǒng)設(shè)置”，選擇“環(huán)境變量”，檢查用戶變量和系統(tǒng)變量中與nvm和nodejs相關(guān)的環(huán)境變量配置是否正確。新建變量 NVM_HOME，值設(shè)為nvm的安裝路徑；新建變量 NVM_SYMLINK，值設(shè)為nvm安裝路徑下的 nodejs 文件夾路徑。

• 之前安裝的node版本影響：之前安裝的node版本可能干擾了nvm的切換。

  • 解決方法：找到之前安裝的node版本所在的文件夾并刪除，然后使用 nvm install [目標(biāo)版本號] 重新安裝目標(biāo)版本，再使用 nvm use [目標(biāo)版本號] 進(jìn)行切換。

（三）npm沒有指令

• 環(huán)境變量問題：環(huán)境變量配置不正確，可能導(dǎo)致系統(tǒng)無法找到npm指令。

  • 解決方法：檢查環(huán)境變量中與npm相關(guān)的路徑是否正確配置。一般來說，需要將npm的安裝路徑添加到系統(tǒng)的 Path 環(huán)境變量中。

• nvm與npm的關(guān)聯(lián)問題：nvm與npm之間的關(guān)聯(lián)出現(xiàn)問題，導(dǎo)致npm指令無法正常使用。

  • 解決方法：將 用戶名/AppData/Roaming/nvm/nodejs/node_modules/npm/bin 路徑下的 npm 和 npm.cmd 兩個文件拷貝到需要的對應(yīng)node版本的根目錄下。

（四）安裝特定版本Node.js 失敗

• 網(wǎng)絡(luò)問題：網(wǎng)絡(luò)不穩(wěn)定或下載源問題可能導(dǎo)致安裝失敗。

  • 解決方法：檢查網(wǎng)絡(luò)連接是否正常，嘗試更換下載源。可以設(shè)置NVM的鏡像源，例如將 nvm node_mirror 設(shè)置為淘寶的鏡像 https://npm.taobao.org/mirrors/node/ ，將 nvm npm_mirror 設(shè)置為 https://npm.taobao.org/mirrors/npm/ 。

• 權(quán)限問題：安裝過程中權(quán)限不足，可能導(dǎo)致無法寫入文件。

  • 解決方法：以管理員身份運(yùn)行安裝命令或安裝程序。

（五）安裝的nvm版本過高導(dǎo)致問題

• 版本兼容性：高版本nvm可能與系統(tǒng)或其他軟件存在兼容性問題，導(dǎo)致切換版本時出錯。

  • 解決方法：卸載nvm后安裝1.1.7版本，通常可以解決此類問題。

六、總結(jié)

通過使用NVM，我們能夠輕松地在Vue2和Vue3項(xiàng)目開發(fā)中管理和切換Node.js 版本，確保每個項(xiàng)目都能在最佳的環(huán)境下運(yùn)行，避免了因版本不兼容而帶來的各種問題。希望本文介紹的內(nèi)容能夠幫助廣大開發(fā)者更加高效地進(jìn)行Vue項(xiàng)目開發(fā)。在實(shí)際使用過程中，如果遇到任何問題，可以參考NVM官方文檔或在相關(guān)技術(shù)論壇上尋求幫助。祝愿大家開發(fā)順利！

七、干貨文章

【保姆級教程】Vue項(xiàng)目調(diào)試技巧：http://www.guosisoft.com/article/detail/430312211521605

干貨|工作中要使用Git，看這篇文章就夠了：http://www.guosisoft.com/article/detail/410508049313861

企業(yè)數(shù)字化轉(zhuǎn)型如何做？看過來：http://www.guosisoft.com/article/detail/408745545576517

干貨-Vue3 組件通信方式詳解：http://www.guosisoft.com/article/detail/561979982622789

Vue2.x 組件通信方式：http://www.guosisoft.com/article/detail/411234710110277

【長文】帶你搞明白Redis：http://www.guosisoft.com/article/detail/558799794786373

國思RDIF低代碼快速開發(fā)平臺（支持vue2、vue3）：http://www.guosisoft.com/article/detail/557095625134149

Vue 前端開發(fā)團(tuán)隊(duì)風(fēng)格指南（史上最全）：http://www.guosisoft.com/article/detail/415491255230533

八、結(jié)語

如果本文對你有一點(diǎn)點(diǎn)幫助，點(diǎn)個贊支持一下吧，你的每一個【贊】都是我創(chuàng)作的最大動力 _

更多技術(shù)文章請往:

http://www.guosisoft.com/article

http://www.rdiframework.net/article

大家一起共同交流和進(jìn)步呀!!