纯小白导入前端项目搭建前端环境fnm、nodejs、yarn
摘要本文详细介绍了 fnmFast Node Manager在 Windows 环境下的完整安装与配置流程包括 fnm 的安装、终端配置、常见问题解决以及使用 fnm 管理 Node.js 版本、安装 yarn 和启动前端项目的完整步骤。文章重点解决了 fnm 安装后 PowerShell 脚本执行权限问题、Node.js 安装时的访问拒绝错误并提供了 yarn 缓存目录配置和 vite 版本降级等实用技巧。目录搭建fnm环境windows安装fnm配置终端问题重新打开PowerShell报错安装nodejsPowerShell中执行问题error: Cant download the requested binary: 拒绝访问。 (os error 5)安装yarn安装查看cache目录设置cache目录安装依赖启动项目降级vite可选fnmFast Node Manager是一个快速、跨平台的 Node.js 版本管理工具类似于 nvm但启动速度更快且支持 Windows。它允许你在同一台机器上轻松安装、切换和管理多个 Node.js 版本通过简单的命令行指令即可完成版本切换非常适合需要同时处理多个项目的开发者。因为前端项目会使用不同的nodejs版本如果电脑安装的全局nodejs环境版本跟项目不对应有可能会导致编译和打包等一系列问题。所以前端开发必须fnm。搭建fnm环境windows安装fnm在PowerShell中执行winget install Schniz.fnmwingetWindows 自带的命令行包管理器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 记事本打开一个文件。$PROFILEPowerShell 的一个内置自动变量它指向你当前用户的“配置文件”路径通常是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 powershellfnm 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: Cant 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: Cant 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 yarn1.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.1package.json中的版本是4.3.2可以降级处理yarn add -D vite4.3.2 --exact此时再次启动项目即可

相关新闻

终极暗黑破坏神2存档编辑器完全指南:重塑你的游戏体验

终极暗黑破坏神2存档编辑器完全指南:重塑你的游戏体验

终极暗黑破坏神2存档编辑器完全指南:重塑你的游戏体验 【免费下载链接】diablo_edit Diablo II Character editor. 项目地址: https://gitcode.com/gh_mirrors/di/diablo_edit Diablo Edit2是一款功能强大的暗黑破坏神2存档编辑器,它彻底改变了玩…

2026/10/27 12:34:57 阅读更多 →
如何轻松掌握BBDown:5个实用技巧快速下载B站视频

如何轻松掌握BBDown:5个实用技巧快速下载B站视频

如何轻松掌握BBDown:5个实用技巧快速下载B站视频 【免费下载链接】BBDown Bilibili Downloader. 一个命令行式哔哩哔哩下载器. 项目地址: https://gitcode.com/gh_mirrors/bb/BBDown 你是否曾经想要保存B站的精彩视频,却发现下载过程复杂繁琐&…

2026/10/28 14:41:52 阅读更多 →
Cocos Store开发者变现指南:从产品定位到商业运营的实战策略

Cocos Store开发者变现指南:从产品定位到商业运营的实战策略

1. 项目概述:从“上架”到“赚钱”的认知跃迁“在Cocos Store上挣到钱”,这大概是很多Cocos开发者心里都琢磨过,但又觉得有点模糊、有点遥远的一件事。我接触Cocos生态快十年了,从最早的Cocos2d-x到现在的Creator,看着…

2026/10/29 7:02:15 阅读更多 →

最新新闻

Electron桌面应用开发实战:从环境搭建到打包发布全流程

Electron桌面应用开发实战:从环境搭建到打包发布全流程

做前端这些年,我大部分时间都在跟浏览器标签页打交道,直到第一次把桌面应用跑起来,才发现原来自己一直被限制在地址栏和刷新按钮围起来的框框里。Electron这个词,最开始是在某段时间频繁出现在同事的讨论里,一个用HTML…

2026/10/28 23:48:14 阅读更多 →
滑盖智能锁T109深度解析:结构原理、安装调试与故障排查

滑盖智能锁T109深度解析:结构原理、安装调试与故障排查

简介:亚太天能T109滑盖智能锁产品说明书是一份PDF格式的官方技术文档,主要面向智能锁安装人员、终端用户及售后维护者,帮助快速掌握产品安装、配置与常见故障处理。全包仅1个PDF文件,大小4.37MB,内容结构清晰&#xff…

2026/10/29 8:45:01 阅读更多 →
PMSM弱磁控制原理与Simulink建模:高速AGV驱动系统设计指南

PMSM弱磁控制原理与Simulink建模:高速AGV驱动系统设计指南

上个月我在调试一台高速AGV的驱动系统,整车要求空载跑到8m/s,电机转速已经拉到额定点,驱动器的输出电压也顶到了母线电压极限附近。再往上踩速度指令,转速纹丝不动,三相电流反而开始震荡。那会儿我的第一反应就是&…

2026/10/29 9:52:56 阅读更多 →
C++核心知识点:从内存管理到STL的实战指南

C++核心知识点:从内存管理到STL的实战指南

C 这门语言我前前后后折腾了十几年,用它写过嵌入式驱动、做过游戏服务端,也搭过基础组件库。每次看到新人一头扎进"C 核心知识点"这个搜索词,我其实挺感慨的——这门语言的难点从来不是语法多,而是知识点之间的耦合太深…

2026/10/28 22:10:30 阅读更多 →
T109滑盖智能锁怎么装?安装调试与故障排查全攻略

T109滑盖智能锁怎么装?安装调试与故障排查全攻略

简介:亚太天能T109滑盖智能锁产品说明书以PDF格式发布,适合智能锁用户、安装人员与售后维修人员阅读。内容围绕T109系列指纹密码刷卡锁展开,先介绍前面板、后面板、锁体、机械钥匙、电池盒盖等部件名称与功能,再给出完整安装步骤&…

2026/10/29 9:51:34 阅读更多 →
LLM知识降熵:从信息垄断到理解权下放

LLM知识降熵:从信息垄断到理解权下放

你有没有过这种经历:翻开源码注释、论文摘要或者一份专业报告,每个字都认识,连在一起却像天书。想找人聊聊,身边要么没人懂,要么懂的懒得跟你解释。后来我试着把同一段内容丢给一个大语言模型,几秒钟之后&a…

2026/10/29 8:44:28 阅读更多 →

日新闻

周新闻

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/28 16:58:40 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/29 9:42:17 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/28 19:25:09 阅读更多 →