已有 WSL 环境的情况下，在 Windows 本地安装 Node.js（附：VSCode 的三种工作模式）

本文介绍了在已有WSL环境下如何在Windows本地安装Node.js的三种方案：

1)直接在Windows安装Node.js（推荐）；

2)共享WSL中的Node.js；

3)双环境共存灵活切换。

详细说明了每种方案的安装步骤、验证方法和配置技巧，包括环境变量设置、编辑器配置等。

同时提供了VSCode的三种工作模式（双窗口独立、单一窗口切换、多文件夹工作区）以及常见问题解决方案。

最佳实践建议根据项目类型选择环境，前端项目用Windows本地，需要Linux特性的项目用WSL，两个环境可并行工作。

本地（而非 WSL 内）安装 Node.js

在已有 WSL 环境的情况下，如果你想在 Windows 本地（而非 WSL 内）安装 Node.js 以便其他 Windows 编辑器（如 WebStorm、Sublime、Notepad++ 等）使用，可以按照以下步骤操作：

方案一：Windows 本地安装 Node.js

1. 安装 Node.js

• 访问 Node.js 官网
• 下载 LTS 版本的 Windows 安装包（.msi）
• 运行安装程序，按默认选项安装即可

关联阅读推荐

使用 Docker 的 Node.js（附：三种 Node.js 环境详细对比）

nodejs：nvm vs fnm 详细对比

2. 验证安装

打开 Windows 的 PowerShell 或 CMD（不是 WSL 终端）：

bash

node --version npm --version

Node.js官方安装程序自带的包管理器只有npm。如何正确安装pnpm

既然Node.js环境已经装好（有node和npm），现在你可以用以下任何一种方法，一分钟内安装好pnpm。

方法一：使用npm安装（最推荐，最通用）
打开你的命令提示符（CMD） 或 PowerShell，运行以下命令：

bashnpm install -g pnpm

这个命令会利用你已有的npm，全局（-g）安装pnpm。安装完成后，新开一个命令行窗口，再运行 pnpm -v 就能看到版本号了。

方法二：使用PowerShell脚本安装（Windows专用）
如果你喜欢，也可以在PowerShell（管理员身份运行）中使用独立脚本安装：

powershelliwr https://get.pnpm.io/install.ps1 -useb | iex

 验证与使用

安装成功后，务必关闭当前命令行窗口，再打开一个新的（这是为了重新加载环境变量），然后输入：

bashpnpm -v

如果显示版本号（例如 9.x.x），就大功告成了。之后你就可以在你的项目目录下，用 pnpm install 代替 npm install 来安装依赖了。总结与建议核心原因：Node.js MSI安装程序不会安装pnpm，你需要手动安装。最佳行动：打开命令行，运行 npm install -g pnpm。后续项目：如果你想在特定项目中强制使用pnpm，可以在项目根目录创建 .npmrc 文件并写入：package-manager=pnpm@latest

如果你在按照以上步骤操作后，pnpm -v 命令仍然不识别，那很可能是系统环境变量（Path） 没有自动更新。

3. 配置系统环境变量（通常自动完成）

安装程序会自动将 Node.js 和 npm 添加到系统 PATH。

4. 在编辑器中配置

• VS Code：使用 WSL 扩展，已经可以直接访问 WSL 中的 Node.js
• 其他编辑器：默认会使用 Windows 本地的 Node.js

方案二：共享 WSL 的 Node.js（需要配置）

如果你希望 Windows 编辑器使用 WSL 中的 Node.js：

1. 在 WSL 中安装 Node.js

bash

# Ubuntu/Debian WSL curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - sudo apt-get install -y nodejs # 验证 node --version

2. 创建访问 WSL Node.js 的脚本

在 Windows 上创建批处理文件 wsl-node.bat：

batch

@echo off wsl node %*

3. 配置编辑器

部分编辑器允许指定 Node.js 解释器路径，可以指向这个批处理文件。

方案三：双环境共存（灵活切换）

1. 安装 Windows 版 Node.js（同方案一）

2. 使用不同终端

• WSL 终端 → 使用 WSL 中的 Node.js
• Windows 终端/PowerShell → 使用 Windows 的 Node.js

3. 识别当前环境

• 检查终端类型：echo $SHELL（WSL） vs 无此变量（Windows）
• 检查路径格式：/mnt/c/（WSL） vs C:\（Windows）

常见问题解决

1. 版本冲突

如果遇到版本问题，可以：

• 在项目根目录创建 .npmrc 指定平台：

text

script-shell=wsl.exe bash

2. 包管理器选择

• Windows 本地：使用 npm 或 yarn（Windows 版）
• WSL 内：使用 npm、yarn 或 pnpm

3. 项目位置建议

• WSL 项目：放在 WSL 文件系统内（/home/username/projects/）
• Windows 项目：放在 Windows 分区（C:\projects\）

4. 性能考虑

• 对于前端项目，Windows 本地 Node.js 性能足够
• 对于需要 Linux 环境的后端项目，建议使用 WSL 中的 Node.js

推荐方案

1. 大部分情况：Windows 本地安装 Node.js（方案一）最简单
2. 需要 Linux 环境：在 WSL 中开发，VS Code 通过 WSL 扩展连接
3. 跨平台项目：使用容器化（Docker）确保环境一致

这样你就可以在保持 WSL Node.js 环境的同时，让其他 Windows 编辑器使用本地安装的 Node.js。

VS Code 可以灵活地在 WSL 环境 和 Windows 本地环境 之间切换，甚至同时使用两种环境。

 VS Code 三种主要使用模式

1. 模式一：双窗口独立工作

同时打开两个 VS Code 实例：

bash

# 在 Windows PowerShell 中打开本地项目 code C:\Users\YourName\Projects\windows-project # 在 WSL 终端中打开 WSL 项目 wsl cd ~/projects/wsl-project code .

这样你会看到两个独立的 VS Code 窗口：

• 一个连接到 WSL 环境（右下角显示 WSL: Ubuntu）
• 一个使用 Windows 本地环境（右下角无 WSL 标识）

2. 模式二：单一窗口切换远程环境

在 VS Code 窗口左下角，点击 远程连接指示器：

text

><

可以：

1. 关闭当前远程连接 → 切回 Windows 本地
2. 选择新的远程目标 → 连接到 WSL 或其他容器
3. 重新打开文件夹 → 在不同环境打开同一项目

3. 模式三：多文件夹工作区

创建包含不同环境文件夹的工作区：

json

// project.code-workspace { "folders": [ { "name": "WSL Project", "uri": "vscode-remote://wsl+Ubuntu/home/user/wsl-project" }, { "name": "Windows Project", "path": "C:\\Users\\user\\windows-project" } ] }

配置技巧

1. 区分终端

在 VS Code 中打开多个终端：

json

// settings.json { "terminal.integrated.profiles.windows": { "PowerShell": { "source": "PowerShell", "icon": "terminal-powershell" }, "WSL Bash": { "path": "wsl.exe", "args": ["-d", "Ubuntu"], "icon": "terminal-bash" } } }

2. 配置文件分离

VS Code 支持环境特定的设置：

json

// Windows 专用设置 .vscode/settings.json // WSL 专用设置 .vscode/remote/settings.json // 或 .vscode/settings.json 配合远程设置

3. 扩展管理

• 用户扩展：安装在 Windows 本地，部分会自动在 WSL 中使用
• WSL 扩展：特定扩展（如某些语言支持）需要在 WSL 中重新安装
• 检查扩展：在扩展面板查看 "Local - Installed" vs "WSL: Ubuntu - Installed"

实际工作流示例

场景1：前端项目（Windows本地）

bash

# Windows PowerShell cd C:\projects\react-app code . # 打开本地环境 # 在 VS Code 中使用 Windows 的终端 npm install # 使用 Windows Node.js npm start

场景2：后端项目（WSL环境）

bash

# WSL 终端 cd ~/projects/node-api code . # 自动连接到 WSL # 在 VS Code 中使用 WSL 终端 npm install # 使用 WSL 中的 Node.js npm run dev

场景3：混合开发

bash

# 同时打开两个窗口 # 窗口1：WSL 后端 wsl cd ~/projects/backend code . # 窗口2：Windows 前端（新 PowerShell 窗口） cd C:\projects\frontend code .

命令行快速切换

1. 强制在特定环境打开

bash

# 强制在 Windows 中打开 code --disable-remote C:\project # 强制在 WSL 中打开 code --remote wsl+Ubuntu /home/user/project

2. 常用命令

bash

# 查看当前连接 code --status # 列出可用远程目标 code --list-remote

3. 使用别名

在 PowerShell 配置文件添加：

powershell

function code-wsl { code --remote wsl+Ubuntu $args } function code-win { code --disable-remote $args }

最佳实践建议

1. 项目位置规划：
   • WSL 项目：放在 /home/user/projects/
   • Windows 项目：放在 C:\Users\user\Projects\
2. Git 配置：bash# Windows：使用 Windows Git # WSL：使用 WSL Git # 避免跨环境操作 Git 仓库
3. 性能优化：
   • WSL 项目性能：将项目放在 WSL 文件系统中（非 /mnt/c/）
   • 大型项目：考虑使用 WSL 2（如果尚未使用）
4. 环境变量管理：json// 环境特定的启动配置 { "configurations": [ { "name": "Windows Debug", "env": { "NODE_ENV": "development" } }, { "name": "WSL Debug", "env": { "NODE_ENV": "development" } } ] }

常见问题

Q1：如何知道当前在哪个环境？

• 查看 VS Code 窗口左下角
• 查看状态栏的远程指示器
• 检查终端路径格式

Q2：扩展需要重复安装吗？

• UI 类扩展（主题、图标）：自动同步
• 工具类扩展（语言支持、调试器）：部分需要 WSL 中安装
• 查看提示：扩展面板会显示 "Install in WSL" 按钮

Q3：如何迁移项目环境？

1. 关闭当前文件夹
2. 点击远程连接指示器
3. 选择 "Reopen Folder in WSL" 或 "Reopen Folder Locally"

Q4：配置文件冲突？

VS Code 会优先使用：

1. .vscode/remote/settings.json（远程特定）
2. .vscode/settings.json（通用）
3. 用户全局设置

总结

VS Code 的远程开发功能让你可以：

• ✅ 同时使用两种环境
• ✅ 轻松切换环境
• ✅ 保持各自环境的独立性
• ✅ 享受相同的编辑器体验

建议做法：根据项目需求选择环境，前端/简单项目用 Windows，需要 Linux 特性的项目用 WSL。两个环境可以无缝并行工作。