如何在ASP.NET Core MVC视图中动态挂载JSX组件？

核心问题分析 #

你遇到的问题根源在于：

• 开发模式下Vite默认启动独立服务器并加载自身的index.html，导致组件挂载到了这个默认页面而非你的Login.cshtml
• 原Login.cshtml中的脚本未使用type="module"，浏览器无法解析ES模块导入；同时使用了ASP.NET虚拟路径~/，Vite开发服务器无法识别

分步解决 #

1. 调整Vite配置文件（vite.config.js）

让Vite与ASP.NET Core的静态资源和后端请求协同工作：

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

export default defineConfig({
  plugins: [react()],
  // 生产环境打包到ASP.NET的wwwroot/dist目录
  build: {
    outDir: '../wwwroot/dist',
    emptyOutDir: true
  },
  // 开发服务器代理，将请求转发到ASP.NET后端
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'https://localhost:5001', // 替换为你的ASP.NET运行端口
        changeOrigin: true,
        secure: false // 自签名HTTPS证书需开启此项
      }
    }
  },
  // 资源基础路径，适配ASP.NET静态资源规则
  base: process.env.NODE_ENV === 'production' ? '/dist/' : '/'
})

2. 修正Login.cshtml的脚本逻辑

确保开发环境下脚本能正确加载Vite模块并挂载组件：

@using SphereSocial.Models
@model PageModel
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Model.PageName - SphereSocial</title>
    @if (Model.IsDevelopment)
    {
        <!-- 开发环境：使用ES模块加载React组件 -->
        <script type="module">
            import React from 'react';
            import { createRoot, StrictMode } from 'react-dom/client';
            import Test from '/src/Test.jsx'; // Vite开发服务器可直接解析此路径

            const rootElement = document.getElementById('loginroot');
            if (rootElement) {
                const root = createRoot(rootElement);
                root.render(
                    <StrictMode>
                        <Test />
                    </StrictMode>
                );
            }
        </script>
        <!-- 引入Vite客户端脚本，支持热更新 -->
        <script type="module" src="http://localhost:5173/@vite/client"></script>
    }
    else
    {
        <!-- 生产环境：加载打包后的静态脚本 -->
        <script type="module" src="~/dist/assets/main.js"></script>
    }
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            <div id="loginroot"></div>
        </main>
    </div>
</body>
</html>

3. 优化Vite入口脚本（src/main.jsx）

避免组件在无关页面（如Vite默认index.html）中自动挂载：

import React from 'react'
import { createRoot, StrictMode } from 'react-dom/client'
import Test from './Test.jsx'

// 仅当页面存在目标元素时才渲染组件
const rootElement = document.getElementById('loginroot')
if (rootElement) {
  createRoot(rootElement).render(
    <StrictMode>
      <Test />
    </StrictMode>,
  )
}

使用说明 #

• 开发时：先启动ASP.NET Core应用，再执行npm run dev，通过ASP.NET的地址（如https://localhost:5001/Login）访问登录页面，Vite会代理静态资源并支持热更新
• 生产时：执行npm run build将React代码打包到wwwroot/dist，ASP.NET会直接加载打包后的脚本

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