在同一台服务器上运行 Vue/vitejs 和 ASP.net 核心 web API

Question

在学校我们有一个项目，我们使用 vite/vuejs 作为前端，使用 ASP.NET 核心 web API 作为其余/后端。

我在 visual studio 中从事后端/rest-api 工作，在 VS Code 中从事前端工作。 现在要运行该网站，我必须在 visual studio 中启动 ASP.net API，然后在 vs code 中运行“npm run dev”命令以启动网站本身。

这两个在单独的“服务器”和不同的端口上运行。

所以我真正的问题是，我怎样才能让这两个在同一个“服务器”和端口上运行。 因此，当我运行该项目时，我希望后端/rest-api 和前端都作为“一个”运行。

我认为该服务是 IIS。

Answer 1

ASP.NET Core 正式支持托管 static 文件服务器。

    app.UseStaticFiles();

默认托管文件夹是wwwroot 。

所以如果你想用同一个服务器托管它，你可以简单地配置你的项目，将所有前端 vue 的东西发布到wwwroot文件夹。

请记住，将前端构建的文件发布到wwwroot ，而不是源文件。

在发布前端代码后，只需启动您的 web 服务器，它就可以正常工作了。

您可以创建绑定以使 Visual Studio 在构建 ASP.NET 核心项目时自动运行一些 npm 构建命令。 因此，您可以构建一次并开始调试。

Answer 2

至少对于 .net 核心 5 和 6 来说，可以实现这一点（使用 VueCLI 时与 VueCliMiddleware 的结果相似）。

您需要做的是按照这篇博客文章，您需要在 Startup.cs 文件中添加和配置 SpaServices： https://blogs.taiga.nl/martijn/2021/02/24/integrating-vite-with-asp -net-core-a-winning-combination/

我的项目也能正常工作，但我不得不对 npm 脚本进行一些更改，因为其他路由被 SPA 部分劫持：

//Startup.cs
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
    }

    app.UseStaticFiles();

    app.UseRouting();

    app.UseResponseCaching();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");

    });

    if (env.IsDevelopment())
    {
        app.UseSpa(spa =>
        {
            // use 'build-dev' npm script
            spa.UseReactDevelopmentServer(npmScript: "build-dev");
        });
    }
}

// package.json
// new script "build-dev" for building vue in development mode
{
  "name": "vueapp",
  "version": "0.0.0",
  "scripts": {
    "dev": "echo Starting the development server && vite",
    "build": "vite build",
    "build-dev": "echo Building for development && vite build --mode development",
    "preview": "vite preview",
  },
  "dependencies": {
    "vue": "^3.2.25",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "eslint": "^8.5.0",
    "eslint-plugin-vue": "^8.2.0",
    "sass": "^1.45.0",
    "vite": "^2.7.2",
    "vue-eslint-parser": "^8.0.1"
  }
}

您可以从解决方案启动它，但我真的更喜欢在终端中使用dotnet watch run - 您可以对 asp.net 的东西进行热重载，但这种设置的缺点是热重载不适用于 Vue。

不管怎样，试一试。

Answer 3

也许试试这个模板。 https://marketplace.visualstudio.com/items?itemName=MakotoAtsu.AspNetCoreViteStarter

在我总是使用 vue + VueCliMiddleware + asp.net 核心之前，我尝试使用 vite，我在探索并尝试在 visual studio 2022 的 asp.net 核心中使用 vite 时发现了这一点。