纯小白导入前端项目搭建前端环境fnm、nodejs、yarn
摘要:本文详细介绍了 fnm(Fast Node Manager)在 Windows 环境下的完整安装与配置流程,包括 fnm 的安装、终端配置、常见问题解决,以及使用 fnm 管理 Node.js 版本、安装 yarn 和启动前端项目的完整步骤。文章重点解决了 fnm 安装后 PowerShell 脚本执行权限问题、Node.js 安装时的访问拒绝错误,并提供了 yarn 缓存目录配置和 vite 版本降级等实用技巧。
目录
搭建fnm环境
windows安装fnm
配置终端
问题:重新打开PowerShell报错
安装nodejs
PowerShell中执行
问题:error: Can't download the requested binary: 拒绝访问。 (os error 5)
安装yarn
安装
查看cache目录
设置cache目录
安装依赖
启动项目
降级vite(可选)
fnm(Fast Node Manager)是一个快速、跨平台的 Node.js 版本管理工具,类似于 nvm,但启动速度更快且支持 Windows。它允许你在同一台机器上轻松安装、切换和管理多个 Node.js 版本,通过简单的命令行指令即可完成版本切换,非常适合需要同时处理多个项目的开发者。
因为前端项目会使用不同的nodejs版本,如果电脑安装的全局nodejs环境版本跟项目不对应,有可能会导致编译和打包等一系列问题。所以前端开发必须fnm。
搭建fnm环境
windows安装fnm
在PowerShell中执行
winget install Schniz.fnm- winget:Windows 自带的命令行包管理器(Windows Package Manager),作用类似 Linux 的 apt、macOS 的 brew,用来一行命令装软件。
- install:安装子命令。
- Schniz.fnm:要安装的包的 ID。Schniz 是作者/发布者名,fnm 是软件名(Fast Node Manager,一个用来管理多个 Node.js 版本的工具)。winget 仓库里每个软件都有这种 发布者.软件名 的唯一 ID。
配置终端
打开终端自动生效fnm并且,进入不同的下项目后,根据项目中的.node-version文件中版本自动切换nodejs版本。
打开环境变量配置文件
# 创建/编辑 profile notepad $PROFILEnotepad:用 Windows 记事本打开一个文件。$PROFILE:PowerShell 的一个内置自动变量,它指向你当前用户的“配置文件”路径,通常是:C:\Users\<你的用户名>\Documents\PowerShell\Microsoft.PowerShell_profile.ps1
这个.ps1脚本的特殊之处在于——每次你打开一个新的 PowerShell 窗口,它里面的内容都会被自动执行一遍(相当于 Linux 的~/.bashrc/~/.zshrc)。
首次执行上述命令一般因为文件或目录不存在报错。如果报错了,在PowerShell中执行检查:
$PROFILE # 看它到底指向哪 Test-Path $PROFILE # 文件在不在,多半返回 False Test-Path (Split-Path $PROFILE) # 目录在不在,你的情况这里也是 False ← 病根如果是目录和文件都不存在,可以继续PowerShell中执行以下命令
# 1. 建目录(-Force 对目录一定会创建多级中间目录,已存在也不报错) New-Item -ItemType Directory -Path (Split-Path $PROFILE) -Force | Out-Null 2. 建空文件(没有才建) if (-not (Test-Path $PROFILE)) { New-Item -ItemType File -Path $PROFILE -Force | Out-Null } 3. 现在 notepad 就能正常打开了 notepad $PROFILE打开记事本后,把下面内容粘贴到末尾,保存,关闭
fnm env --use-on-cd --shell powershell | Out-String | Invoke-Expression上述命令中的 | 是管道符,数据从左往右流动,也就是说上述命令由三条命令组成。
第①段:fnm env --use-on-cd --shell powershell
- fnm env:让 fnm 生成一段“环境初始化脚本”(注意:它本身不设置环境,只是把脚本“打印”出来)。这段脚本的作用是设置 PATH、定义切换版本的钩子函数等。
- --shell powershell:告诉 fnm“请按 PowerShell 语法 生成这段脚本”(fnm 还支持 bash、zsh、fish 等)。
- --use-on-cd:开启“切换目录时自动切换 Node 版本”的功能——当你 cd 进一个含有 .nvmrc 或 .node-version 文件的项目目录时,fnm 会自动切到该项目要求的 Node 版本,离开时再切回去。这正是截图标题说的“shell 自动切换”。
第②段:| Out-String
- 把上一段输出的内容合并成一个完整的纯文本字符串。因为
fnm env吐出来的是“一行行的字符串对象/数组”,而下一步的执行命令要求输入是单个字符串,所以用Out-String拼接一下,避免格式错乱。
第③段:| Invoke-Expression
- 把上一步得到的字符串当作 PowerShell 命令真正执行一遍。也就是说,第①段只是“生成脚本”,到这一步脚本才被实际运行,环境变量和钩子函数这才被注入到当前会话里。
整句意思:生成 fnm 的 PowerShell 初始化脚本 → 转成字符串 → 立即执行它,从而在当前终端里激活 fnm 并启用“进目录自动切 Node 版本”
问题:重新打开PowerShell报错
配置后,重新打开PowerShell可能会有如下错误
错误提示:因为在此系统上禁止运行脚本。直接在你当前这个 PowerShell 窗口里粘贴执行即可(普通窗口就行,不用右键“以管理员身份运行”,因为我们只改“当前用户”的策略):
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned -Force验证命令(可以执行上述命令前后都执行下此命令,看下区别):
Get-ExecutionPolicy -List关闭当前PowerShell窗口,再次打开一个新的PowerShell窗口发现没有错误了
安装nodejs
在项目的package.json中有"@types/node": "^18.11.12",这是给 TypeScript 用的 Node 类型定义, 版本号直接反映开发时使用的 Node 主版本 ,团队用的是 Node 18。因为18.20.4是最后一个LTS版本,所以安装这个版本
PowerShell中执行
fnm install 18.20.4 fnm use 18.20.4 node -v # 应输出 v18.20.4可以使用命令: fnm ls-remote 查看远程可供下载的版本
问题:error: Can't download the requested binary: 拒绝访问。 (os error 5)
执行fnm install 18.20.4安装,下载完成后报错如下:
Installing Node v18.20.4 (x64) 00:02:01 ████████████████████████████████████████████████████████████████████████ 27.40 MiB/27.40 MiB (230.36 KiB/s, 0s) error: Can't download the requested binary: 拒绝访问。 (os error 5)
下载已经成功了(进度条走完了 27.40 MiB),死在解压/写入那一步。os error 5就是 Windows 的"拒绝访问"——fnm 想把node.exe写到自己的安装目录时,被系统拦了。
之前的 node、npm、甚至 VS Code / Trae 的终端后台都可能锁住 fnm 目录里的文件:
taskkill /f /im node.exe 2>$null然后关掉所有终端窗口、关掉 Trae / VS Code,重新开一个全新的 PowerShell,再跑:
fnm install 18.20.4如果还是不行,尝试以管理员身份打开PowerShell窗口执行上述命令。如果再不行,就重启下电脑(可能是不知名进程占用导致),管理员身份运行PowerShell窗口,再执行上述命令
安装yarn
项目中有yarn.lock文件,说明是yarn进行编译运行的项目,文件中第二行看到# yarn lockfile v1说明是用V1版本。安装命令采用corepack,这种方式安装的yarn版本可以根据不同随着nodejs版本一块切换
安装
corepack enable # 进入项目根目录 cd …… # 安装 corepack prepare yarn@1.22.22 --activate # 查看版本 yarn -v查看cache目录
yarn cache dir设置cache目录
yarn config set cache-folder D:\soft\yarn\cache安装依赖
yarn install如果没有报错,说明按爪依赖成功。
启动项目
yarn dev降级vite(可选)
发现vite版本是4.5.1,package.json中的版本是4.3.2,可以降级处理
yarn add -D vite@4.3.2 --exact此时再次启动项目即可
