我有一个现有的 ASP.NET Core MVC 网站，我正在考虑将 React 应用程序放到服务器端视图之一（例如，在 下Views/gallery.cshtml）。这里不涉及复杂的路由，因为它纯粹是 React 应用程序的单一视图。顺便说一下，React 应用程序是通过 create-react-app (CRA) 创建的。
每当我去到一个特定的路线时，比如说/gallery，我看到的是 React 应用程序，否则，它只会像往常一样从 MVC 服务器端视图呈现。
我并不热衷于让整个 MVC 网站成为一个 SPA 应用程序，并且有兴趣知道是否有任何其他潜在的解决方案来实现这一目标。
虽然使用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
}
]
}
}
所以React app 使用webpack/babel 编译打包，然后输出到指定目录。我将它直接放在 /wwwroot 下，它可以在 MVC 视图中轻松引用。
是的，你可以这样做。在给出npm run build 后，复制你的 mvc 应用根目录中的静态文件夹，并在你的视图页面上引用那些 css 和 js，它会将你的react应用程序呈现到你的 mvc 视图中。