VS2019 Asp.net Core React项目jsconfig配置绝对路径无法解析

VS2019内置的ASP.NET Core React模板的ClientApp默认基于Create React App（CRA）生成，CRA默认封闭了webpack配置，所以仅配置jsconfig.json只有IDE能识别，webpack打包阶段无法解析别名，以下是无需使用module-alias的适配方案：

方案1：无eject修改CRA配置（推荐，不破坏默认模板结构） #

• 安装依赖：npm install react-app-rewired customize-cra --save-dev
• 在ClientApp根目录新建config-overrides.js文件，写入以下配置：

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    // 可按需求自定义别名
    '@': path.resolve(__dirname, 'src'),
    '@components': path.resolve(__dirname, 'src/components')
  })
);

• 修改ClientApp下package.json中的scripts配置，将所有react-scripts替换为react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

• 保持jsconfig.json配置和上述别名一致即可：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

该方案不需要修改.NET侧的任何启动、发布逻辑，VS会自动调用修改后的npm脚本，兼容原模板的所有工作流。

方案2：eject CRA内置配置（适合需要大量自定义构建逻辑的场景） #

• 在ClientApp目录执行npm run eject，确认操作后会释放CRA内置的所有配置文件到根目录的config文件夹
• 打开config/webpack.config.js，找到resolve.alias配置项，追加自定义别名即可：

alias: {
  // 原有默认配置保留
  'react-native': 'react-native-web',
  // 新增自定义别名
  '@': path.resolve(__dirname, '../src'),
  '@components': path.resolve(__dirname, '../src/components')
}

• 同样保持jsconfig.json配置和上述别名一致即可，无需修改package.json的scripts配置。

注意：eject操作不可逆，执行后无法再回退到CRA的默认封闭配置模式。

方案3：迁移到Vite构建（适合追求构建效率的场景） #

如果原项目对CRA没有强依赖，可以将ClientApp迁移到Vite，Vite天然支持路径别名配置，配置更简单：

• 完成React项目到Vite的基础迁移
• 在vite.config.js中配置别名：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components')
    }
  }
})

• 同步配置jsconfig.json的paths项即可，Vite打包时会自动解析别名，无需额外依赖。
• 迁移后需要修改.NET项目的启动配置，将原npm start对应的端口和命令替换为Vite的对应配置，发布时修改npm run build命令为Vite的build命令即可。

所有方案均需要保证jsconfig.json的路径配置和构建工具的别名配置完全一致，避免出现IDE不报错但构建/运行时报错的问题。

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