我正在尝试使用使用 React 和 Vite 作为捆绑器的 ClientApp 设置 ASP.NET MVC 应用程序。这应该是 MPA 而不是 SPA,所以 我的应用程序的每个页面都会有一个单独的 .tsx 文件(即 home.tsx、about.tsx 等)
在开发过程中,ClientApp 文件应由 Vite 开发服务器提供给我的 HMR ASP.NET 应用程序,而在生产中,应用程序将使用 wwwroot/dist 中的捆绑文件。
我尝试设置我的Program.cs以使用Vite.AspNetCore包与Vite开发服务器通信。
程序.cs:
using Vite.AspNetCore.Extensions;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddViteServices(options =>
{
options.PackageDirectory = "ClientApp"; // Set the root path to the ClientApp folder
});
builder.Services.AddControllersWithViews();
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
app.UseHsts();
}
else
{
app.UseViteDevelopmentServer();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();
为了从 Vite 开发服务器读取数据,我将以下块添加到我的 _Layout.cshtml 文件中,该文件将由我的所有视图共享:
<environment include="Development">
<script type="module" src="https://localhost:5173/@@vite/client"></script>
<link rel="stylesheet" href="https://localhost:5173/src/theme/site.css" />
@if (ViewData["ViteScript"] != null)
{
<script defer type="module" src="@($"https://localhost:5173/src/pages/{ViewData["ViteScript"]}/index.tsx")"></script>
}
</environment>
换句话说,我正在尝试从 ClientApp/src/theme/site.css 读取 site.css 文件,以及与我所在的特定页面关联的 index.tsx 文件, 例如 ClientApp/src/pages/home/index.tsx。页面名称(如“home”)存储在 Razer 视图顶部的 ViewData["ViteScript"] 中。
所以我在端口 5173 上运行我的 Vite 开发服务器,然后运行我的 ASP.NET 应用程序,但我遇到了通用消息:
"Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong."
作为参考,这是我的 vite.config.ts 文件:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import mkcert from "vite-plugin-mkcert";
import appsettings from "../appsettings.json";
import appsettingsDev from "../appsettings.Development.json";
const cssPattern = /\.css$/;
const imagePattern = /\.(png|jpe?g|gif|svg|webp|avif)$/;
export default defineConfig({
plugins: [react(), mkcert()],
build: {
manifest: appsettings.Vite.Manifest,
outDir: "../wwwroot/dist",
emptyOutDir: true,
rollupOptions: {
input: {
home: "./src/pages/home/index.tsx",
site: "./src/site.ts",
styles: "./src/theme/site.css",
},
output: {
entryFileNames: "js/[name].js",
chunkFileNames: "js/[name]-chunk.js",
assetFileNames: (info) => {
if (info.name) {
if (cssPattern.test(info.name)) {
return "css/[name][extname]";
}
if (imagePattern.test(info.name)) {
return "images/[name][extname]";
}
return "assets/[name][extname]";
} else {
return "[name][extname]";
}
},
},
},
},
server: {
port: appsettingsDev.Vite.Server.Port,
strictPort: true,
hmr: {
host: "localhost",
clientPort: appsettingsDev.Vite.Server.Port,
},
},
});
当我检查 Chrome 开发人员工具的“源”选项卡时,我看到 ASP.NET 应用程序在 localhost:44380 上运行,Vite 开发服务器在 localhost:5173 上运行(及其文件,如 ExampleComponent.tsx 和pages/home/index.html)。 tsx.
这是解决方案资源管理器中我的 ClientApp 的屏幕截图:
如果有人在尝试将 Vite 开发服务器集成到 MPA 时遇到类似的问题,我将非常感谢您的帮助。
谢谢!
您还需要添加react-refresh脚本以使开发服务器与React一起工作。 您可以在后端集成页面看到它。