最近需要拉公司的Vue項(xiàng)目到本地，但是筆者作為后端人員在安裝Node的過程中遇到挺多問題。所以記錄一下，希望能幫到大家。

筆者運(yùn)行電腦環(huán)境：

• Mac M1芯片版本
• macos ventura 13.0.1
• 沒有安裝過node、homebrew的機(jī)器

接下來開始進(jìn)入安裝正題?

一、安裝HomeBrew

安裝HomeBrew這一塊一般是沒有問題的，因?yàn)橄螺d最新的brew即可。它在本文中只作為Mac的一個軟件包下載管理工具

具體操作流程：

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

按著終端提示走即可，很好處理。安裝完畢后可以用brew --help或者brew -v來驗(yàn)證，提示如下則無誤：

如果報錯：Command failed with exit 128:git?

在終端輸入brew -v后會提示執(zhí)行兩個命令，復(fù)制執(zhí)行即可

git config --global --add safe.directory /opt/homebrew/Library/Taps/homebrew/homebrew-cask
Homebrew/homebrew-cask

git config --global --add safe.directory /opt/homebrew/Library/Taps/homebrew/homebrew-core
Homebrew/homebrew-core

二、安裝Node環(huán)境

最開始本人使用brew install?node來安裝node，但回過頭來看這一步是很愚蠢的，沒有考慮到Vue項(xiàng)目中node版本的兼容性。因?yàn)閎rew install?node安裝的應(yīng)該是最新的穩(wěn)定版本，很有可能會比實(shí)際項(xiàng)目高很多。當(dāng)然后期可以通過brew uninstall node來卸載之前安裝的node，再通過brew install node@node版本號來安裝合適版本。其實(shí)在Mac沒有安裝node之前是最好安裝node多版本管理器(nvm)的時機(jī)，相關(guān)安裝順序?yàn)閚vm->node->nrm。好！一個個來說。

先說nvm和node的操作：

#安裝前確保機(jī)器沒有node，盡量讓nvm去管理機(jī)器的node版本
#使用brew安裝nvm
brew install nvm
#檢查nvm是否可用
nvm -v
#為了確保關(guān)閉終端之后再次打開nvm指令繼續(xù)生效，執(zhí)行下面的操作
vi ~/.zshrc
#增加如下命令： 指定nvm家目錄，本人直接安裝在mac當(dāng)前用戶了 source使nvm命令生效 更改nvm源
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh
export NVM_NODEJS_ORG_MIRROR=http://npm.taobao.org/mirrors/node
export NVM_IOJS_ORG_MIRROR=http://npm.taobao.org/mirrors/iojs
#退出之后
source ~/.zshrc
#開始通過nvm安裝node
#列出所有可安裝的遠(yuǎn)程node版本
nvm ls-remote
#安裝指定版本
nvm install <version> 
#使用指定的版本node
nvm use <version>
#指定默認(rèn)版本的version
nvm alias default <version>

? nvm常用指令：

nvm -v //查看nvm版本
nvm ls //查看本機(jī)已經(jīng)安裝node版本
nvm ls-remote //列出所有可安裝的遠(yuǎn)程node版本
nvm install stable    //安裝最新版本
nvm install <version> //安裝指定版本
nvm uninstall stable   //卸載最新版本
nvm uninstall <version>   //卸載指定版本
nvm deactivate //取消當(dāng)前nvm命令行效果，慎用。我使用之后發(fā)現(xiàn)會取消之前設(shè)置的alias，還有一些奇怪的現(xiàn)象，未做深究
nvm current //查看當(dāng)前使用的node版本
nvm alias <name> <version> //給版本<version>設(shè)置一個別名
nvm unalias <name> //刪除<name>的版本別名
npm which [current|<version>] //顯示已安裝node的安裝路徑。
nvm cache dir //顯示nvm的緩存目錄
nvm cache clear //清楚nvm的緩存目錄
nvm node_mirror [url] //設(shè)置node鏡像
nvm npm_mirror [url] //設(shè)置npm鏡像
nvm on //開啟node.js版本管理
nvm off //關(guān)閉node.js版本管理

?上面有兩點(diǎn)需要注意：

• 指定node版本之后一定要設(shè)置alias default。因?yàn)椴恢概蒩lias會出現(xiàn)一個問題，關(guān)閉當(dāng)前操作終端或者打開idea的terminal去操作npm、node都會提示相關(guān)命令不是內(nèi)部指令。當(dāng)時一度懷疑idea的terminal是不是抽風(fēng)，而且特意關(guān)閉終端再去操作，想想真是想抽自己。
• nvm?cache?dir和nvm?cache?clear命令真的是對磁盤大小愛好者的福音。本人一個后端程序猿在裝node14版本的時候發(fā)現(xiàn)，一個前端的腳本運(yùn)行環(huán)境竟然吃了我10個G。當(dāng)時極其納悶，甚至想將Vue項(xiàng)目放到公司W(wǎng)indows電腦上去運(yùn)行。最后在好奇心(就是不甘心)下在運(yùn)行cleanmymac查找大型文件夾，最后定位到了.nvm下面的.cache下。沒有進(jìn)行nvm?cache?clear前，它居然占據(jù)了9.4G，感情node14就600M唄。故此用nvm?cache?clear讓cache速速退下，當(dāng)然如果讀者不在意磁盤就沒必要操作了。

安裝完nvm和node后，還有一個工具可以安裝。相信大家在使用npm install的時候發(fā)現(xiàn)安裝巨慢，受不了的小伙伴都回去查一下怎么加快安裝進(jìn)度，最后可能就會轉(zhuǎn)向修改npm源。解下來安裝的工具nrm就是為了給大家切換npm源存在源版本管理器。具體操作如下：

#安裝nrm
npm install nrm
#檢查nrm是否有效
nrm -V #或者npm ls -g查看
#列出可用遠(yuǎn)程源
nrm ls
#切換源
nrm use <registry> #registry為別名如taobao

nrm常用指令：

#列出可用遠(yuǎn)程源
nrm ls
#切換源
nrm use <registry> #registry為別名如taobao
#添加源
nrm add <registry> <url>
#刪除源
nrm del <registry>
#測試源速度
nrm test <registry>

node兼容性對照表：?

三、安裝Python相關(guān)環(huán)境

安裝完node之后，本以為將要順風(fēng)順?biāo)膎pm install，卻發(fā)現(xiàn)install報錯：gyp verb check?python checking for Python executable python2 in the PATH

檢查之后發(fā)現(xiàn)，Mac在現(xiàn)在系統(tǒng)版本中默認(rèn)出廠安裝Python3而不安裝Python2，這其實(shí)沒問題，因?yàn)镻ython2已經(jīng)官方停止維護(hù)了。但是現(xiàn)在還有生產(chǎn)的項(xiàng)目用著Pyhton2，再加上筆者的Mac是M1芯片的ARM架構(gòu)不知道會不會因?yàn)閯h除Python3安裝Python2而導(dǎo)致問題。為了順利安裝Python2并且不卸載Python3影響Mac系統(tǒng)原本的運(yùn)作，選擇安裝pyenv來進(jìn)行python多版本管理。

具體安裝如下：

#brew安裝pyenv
brew install pyenv
#pyenv安裝python2版本
pyenv install 2.7.18
#打開配置文件
vi ~/.zshrc
#增加如下命令
export PATH="$(pyenv root)/shims:${PATH}"
#使文件生效
source ~/.zshrc
#設(shè)置全局python2的版本
pyenv global 2.7.18
#檢查python2是否生效
python --version

pyenv 常用命令：?

pyenv version #查看當(dāng)前系統(tǒng)使用的python版本
pyenv versions #查看當(dāng)前系統(tǒng)擁有的python版本（system代表當(dāng)前系統(tǒng)的python版本號）
pyenv install --list #查看可以安裝的版本
pyenv install <version> #安裝指定版本，可以使用-v看詳細(xì)輸出
pyenv uninstall <version> #卸載指定版本
pyenv local <version> #local僅對當(dāng)前目錄及其子目錄生效，告訴目錄使用<version>版本
pyenv global <version> #告訴全局環(huán)境使用<version>版本，為了不破壞系統(tǒng)默認(rèn)環(huán)境，不建議使用global命令
pyenv rehash #重建環(huán)境變量，每當(dāng)增刪python版本或增刪帶可執(zhí)行性的包（如pip）后，都應(yīng)該執(zhí)行一次本命令
pyenv which #顯示pyenv在運(yùn)行給定命令時將調(diào)用的可執(zhí)行文件的絕對路徑
#卸載pyenv
rm -rf $(pyenv root)
brew uninstall pyenv

四、Npm install安裝Electron

在npm install項(xiàng)目的過程中還有問題耽擱了筆者很多時間，這里列出來希望對通過Mac構(gòu)建Vue項(xiàng)目的小伙伴有所幫助。

• 安裝electron巨慢?。?！

進(jìn)入項(xiàng)目根目錄，執(zhí)行下面的命令，建議在idea的terminal中操作

npm config set electron_mirror https://cdn.npmmirror.com/binaries/electron/
npm config set electron_builder_binaries_mirror https://npmmirror.com/mirrors/electron-builder-binaries/

添加完畢之后再次進(jìn)行npm install(刪掉原本的node_modules，npm?cache?clean?--force之后)?

• 構(gòu)建過程中出現(xiàn)報錯：Response code 404 (Not Found) for https://github.com/electron/electron/releases/download/v9.4.4/electron-v9.4.4-darwin-arm64.zip，怎么修改npm源都不好使

從StackOverFlow的大手子那里得知，想要在Mac M1上面使用electron需要升級electron版本。修改package.json中的electron版本：

"resolutions": {
  "electron": "^11.0.1"
}

• Cannot find module 'fs/promises'

升級node等級吧，少年。筆者從12升級到14解決問題，但是為什么node14和項(xiàng)目里node-sass的4.12.0版本兼容就不知道了

• mac npm build: fsevents Unexpected character (1:0)

這個是運(yùn)行期間的問題，具體解決方式為：

修改vue.config.js文件，添加external

module.exports = defineConfig({
    configureWebpack: {
        externals: ['fsevents'],
    },

有興趣的可以去github看看這個issue?

關(guān)于這個issue有另外一種處理方式：

查找項(xiàng)目中的./node_modules/fsevents/fsevents.js 文件

//修改
const Native = require("./fsevents.node")
//更改為
const Native = window.require("./fsevents.node")

親測有效～?

?文章來源地址http://www.zghlxwxcb.cn/news/detail-791581.html

• 截止到這筆者的Vue項(xiàng)目已經(jīng)編譯運(yùn)行成功了，但.....還是訪問不到。后面的問題還未深究(其實(shí)就是不會，如果有會的大手子請告訴我～)

Vue項(xiàng)目啟動無反應(yīng)的問題已經(jīng)解決，此問題沒有報錯。但是在執(zhí)行npm run electron:serve 的時候會卡在

App running at.....

最后發(fā)現(xiàn)是因?yàn)槲业捻?xiàng)目中有 yarn.lock文件，所以vue-cli會在服務(wù)器中尋找yarn運(yùn)行環(huán)境。 但是我沒有在服務(wù)器上安裝yarn。 所以代碼在執(zhí)行到hasProjectYarn(api.getCwd())?的時候就停止了。 如果你沒安裝yarn，同時你的項(xiàng)目中有yarn.lock文件，你應(yīng)該刪除這個文件保證Vue-cli 運(yùn)行正常。StackOverflow相關(guān)issue的傳送門?(提問的是我，回答的也是我?????)

?

到了這里，關(guān)于記一次Mac M1安裝Node并且構(gòu)建Vue項(xiàng)目的經(jīng)歷的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！