在 ASP.NET Core MVC 中显示 React 应用程序的方法

Question

我有一个现有的 ASP.NET Core MVC 网站，并且正在考虑将 React 应用程序放到服务器端视图之一上（例如在Views/gallery.cshtml下）。 这里不涉及复杂的路由，因为它纯粹是 React 应用程序的单一视图。 顺便说一句，React 应用程序是通过 create-react-app (CRA) 创建的。

每当我 go 到特定路线时，比如/gallery ，我都会看到 React 应用程序，否则，它只会按照正常情况从 MVC 服务器端视图呈现。

我并不热衷于让整个 MVC 网站成为 SPA 应用程序，并且有兴趣知道是否有任何其他潜在的解决方案可以实现这一目标。

Answer 1

虽然使用npm run build可能有效，但我最终使用了webpack/babel方法，因为我认为它在捆绑和优化方面给了我更好的控制。 关键位如下：

.babelrc

{
    "presets": [
      "@babel/preset-react"
    ],
    "plugins": [
    ]
}

webpack.config.js

const path = require("path");

module.exports = {
    entry: {
        index: "./src/index.js"
    },
    output: {
        path: path.resolve(__dirname, "../wwwroot/dist"),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                use: {
                    loader: "babel-loader"
                },
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                use: ["style-loader", "css-loader"],
                test: /\.css$/i
            }
        ]
    }
}

所以使用 webpack/babel 编译和打包 React 应用，然后 output 到指定目录。 我将它直接放在 /wwwroot 下，可以在 MVC 视图中轻松引用它。

Answer 2

是的，你可以这么做。 在给npm 运行 build之后，将 static 文件夹复制到您的 mvc 应用程序根目录中，并在您的视图页面上引用那些 css 和 js，它会在您的 mvc 应用程序视图中呈现您的视图。