Visual Studio 2022中ASP.NET Core React项目多node_modules问题求助

1. 彻底清理多余依赖文件 #

• 完全关闭Visual Studio 2022及所有关联终端窗口
• 删除项目根目录下的node_modules文件夹、package.json、package-lock.json（这些文件本应仅存在于ClientApp目录下）
• 打开终端，切换到ClientApp目录：cd ClientApp
• 强制清理NPM缓存：npm cache clean --force
• 删除ClientApp下的node_modules和package-lock.json，重新安装依赖：npm install

2. 修正组件导入路径 #

所有前端依赖必须统一从ClientApp/node_modules导入，检查并修改组件中的导入语句：

• 错误示例（根目录或全局路径导入）：import React from '../../../node_modules/react' 或指向AppData的路径
• 正确写法（直接使用包名，NPM会自动解析本地依赖）：

  import React from 'react';
  import { Button, Container } from 'react-bootstrap';
  import { Routes, Route, Link } from 'react-router-dom';
  

3. 配置VS2022的工作目录 #

确保Visual Studio执行NPM命令时默认指向ClientApp：

• 右键项目 → 属性 → 调试 → 将"工作目录"设置为$(ProjectDir)ClientApp
• 检查Properties/launchSettings.json，确保workingDirectory字段指向ClientApp：

  "profiles": {
    "YourProjectName": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "workingDirectory": "$(ProjectDir)ClientApp"
    }
  }
  

4. 验证依赖唯一性 #

在ClientApp目录下执行npm ls react，确认输出仅显示一个本地安装的React实例。若仍存在指向AppData的全局依赖，先卸载全局包：npm uninstall -g react react-bootstrap react-router-dom，再重新在ClientApp下安装本地依赖：npm install react react-bootstrap react-router-dom

内容的提问来源于stack exchange，提问作者kendric