在 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 應用程序視圖中呈現您的視圖。