记一次Mac M1安装Node并且构建Vue项目的经历-Toy模板网

这篇具有很好参考价值的文章主要介绍了记一次Mac M1安装Node并且构建Vue项目的经历。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近需要拉公司的Vue项目到本地，但是笔者作为后端人员在安装Node的过程中遇到挺多问题。所以记录一下，希望能帮到大家。

笔者运行电脑环境：

Mac M1芯片版本
macos ventura 13.0.1
没有安装过node、homebrew的机器

接下来开始进入安装正题

brew install node,Node,node.js

一、安装HomeBrew

安装HomeBrew这一块一般是没有问题的，因为下载最新的brew即可。它在本文中只作为Mac的一个软件包下载管理工具

具体操作流程：

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

按着终端提示走即可，很好处理。安装完毕后可以用brew --help或者brew -v来验证，提示如下则无误：

brew install node,Node,node.js

如果报错：Command failed with exit 128:git

在终端输入brew -v后会提示执行两个命令，复制执行即可

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环境

最开始本人使用brew install node来安装node，但回过头来看这一步是很愚蠢的，没有考虑到Vue项目中node版本的兼容性。因为brew install node安装的应该是最新的稳定版本，很有可能会比实际项目高很多。当然后期可以通过brew uninstall node来卸载之前安装的node，再通过brew install node@node版本号来安装合适版本。其实在Mac没有安装node之前是最好安装node多版本管理器(nvm)的时机，相关安装顺序为nvm->node->nrm。好！一个个来说。

brew install node,Node,node.js

先说nvm和node的操作：

#安装前确保机器没有node，尽量让nvm去管理机器的node版本
#使用brew安装nvm
brew install nvm
#检查nvm是否可用
nvm -v
#为了确保关闭终端之后再次打开nvm指令继续生效，执行下面的操作
vi ~/.zshrc
#增加如下命令： 指定nvm家目录，本人直接安装在mac当前用户了 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
#列出所有可安装的远程node版本
nvm ls-remote
#安装指定版本
nvm install <version> 
#使用指定的版本node
nvm use <version>
#指定默认版本的version
nvm alias default <version>

nvm常用指令：

nvm -v //查看nvm版本
nvm ls //查看本机已经安装node版本
nvm ls-remote //列出所有可安装的远程node版本
nvm install stable    //安装最新版本
nvm install <version> //安装指定版本
nvm uninstall stable   //卸载最新版本
nvm uninstall <version>   //卸载指定版本
nvm deactivate //取消当前nvm命令行效果，慎用。我使用之后发现会取消之前设置的alias，还有一些奇怪的现象，未做深究
nvm current //查看当前使用的node版本
nvm alias <name> <version> //给版本<version>设置一个别名
nvm unalias <name> //删除<name>的版本别名
npm which [current|<version>] //显示已安装node的安装路径。
nvm cache dir //显示nvm的缓存目录
nvm cache clear //清楚nvm的缓存目录
nvm node_mirror [url] //设置node镜像
nvm npm_mirror [url] //设置npm镜像
nvm on //开启node.js版本管理
nvm off //关闭node.js版本管理

上面有两点需要注意：

指定node版本之后一定要设置alias default。因为不指派alias会出现一个问题，关闭当前操作终端或者打开idea的terminal去操作npm、node都会提示相关命令不是内部指令。当时一度怀疑idea的terminal是不是抽风，而且特意关闭终端再去操作，想想真是想抽自己。
nvm cache dir和nvm cache clear命令真的是对磁盘大小爱好者的福音。本人一个后端程序猿在装node14版本的时候发现，一个前端的脚本运行环境竟然吃了我10个G。当时极其纳闷，甚至想将Vue项目放到公司Windows电脑上去运行。最后在好奇心(就是不甘心)下在运行cleanmymac查找大型文件夹，最后定位到了.nvm下面的.cache下。没有进行nvm cache clear前，它居然占据了9.4G，感情node14就600M呗。故此用nvm cache clear让cache速速退下，当然如果读者不在意磁盘就没必要操作了。

brew install node,Node,node.js

安装完nvm和node后，还有一个工具可以安装。相信大家在使用npm install的时候发现安装巨慢，受不了的小伙伴都回去查一下怎么加快安装进度，最后可能就会转向修改npm源。解下来安装的工具nrm就是为了给大家切换npm源存在源版本管理器。具体操作如下：

#安装nrm
npm install nrm
#检查nrm是否有效
nrm -V #或者npm ls -g查看
#列出可用远程源
nrm ls
#切换源
nrm use <registry> #registry为别名如taobao

nrm常用指令：

#列出可用远程源
nrm ls
#切换源
nrm use <registry> #registry为别名如taobao
#添加源
nrm add <registry> <url>
#删除源
nrm del <registry>
#测试源速度
nrm test <registry>

node兼容性对照表：

brew install node,Node,node.js

三、安装Python相关环境

安装完node之后，本以为将要顺风顺水的npm install，却发现install报错：gyp verb check python checking for Python executable python2 in the PATH

检查之后发现，Mac在现在系统版本中默认出厂安装Python3而不安装Python2，这其实没问题，因为Python2已经官方停止维护了。但是现在还有生产的项目用着Pyhton2，再加上笔者的Mac是M1芯片的ARM架构不知道会不会因为删除Python3安装Python2而导致问题。为了顺利安装Python2并且不卸载Python3影响Mac系统原本的运作，选择安装pyenv来进行python多版本管理。

具体安装如下：

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

pyenv 常用命令：

pyenv version #查看当前系统使用的python版本
pyenv versions #查看当前系统拥有的python版本（system代表当前系统的python版本号）
pyenv install --list #查看可以安装的版本
pyenv install <version> #安装指定版本，可以使用-v看详细输出
pyenv uninstall <version> #卸载指定版本
pyenv local <version> #local仅对当前目录及其子目录生效，告诉目录使用<version>版本
pyenv global <version> #告诉全局环境使用<version>版本，为了不破坏系统默认环境，不建议使用global命令
pyenv rehash #重建环境变量，每当增删python版本或增删带可执行性的包（如pip）后，都应该执行一次本命令
pyenv which #显示pyenv在运行给定命令时将调用的可执行文件的绝对路径
#卸载pyenv
rm -rf $(pyenv root)
brew uninstall pyenv

四、Npm install安装Electron

在npm install项目的过程中还有问题耽搁了笔者很多时间，这里列出来希望对通过Mac构建Vue项目的小伙伴有所帮助。

安装electron巨慢！！！

进入项目根目录，执行下面的命令，建议在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/

添加完毕之后再次进行npm install(删掉原本的node_modules，npm cache clean --force之后)

构建过程中出现报错：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和项目里node-sass的4.12.0版本兼容就不知道了

brew install node,Node,node.js

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

这个是运行期间的问题，具体解决方式为：

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

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

有兴趣的可以去github看看这个issue

关于这个issue有另外一种处理方式：

查找项目中的./node_modules/fsevents/fsevents.js 文件

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

亲测有效～

文章来源地址https://www.toymoban.com/news/detail-791581.html

截止到这笔者的Vue项目已经编译运行成功了，但.....还是访问不到。后面的问题还未深究(其实就是不会，如果有会的大手子请告诉我～)

Vue项目启动无反应的问题已经解决，此问题没有报错。但是在执行npm run electron:serve 的时候会卡在

App running at.....

最后发现是因为我的项目中有 yarn.lock文件，所以vue-cli会在服务器中寻找yarn运行环境。但是我没有在服务器上安装yarn。所以代码在执行到hasProjectYarn(api.getCwd()) 的时候就停止了。如果你没安装yarn，同时你的项目中有yarn.lock文件，你应该删除这个文件保证Vue-cli 运行正常。StackOverflow相关issue的传送门 (提问的是我，回答的也是我😵‍💫)

到了这里，关于记一次Mac M1安装Node并且构建Vue项目的经历的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！