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

【问题标题】：Run Vue/vitejs and ASP.net core web API on same server在同一台服务器上运行 Vue/vitejs 和 ASP.net 核心 Web API
【发布时间】：2021-08-26 12:06:32
【问题描述】：

在学校，我们有一个项目，我们使用 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。

【问题讨论】：

标签： asp.net vue.js vuejs3 vite

【解决方案1】：

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

    app.UseStaticFiles();

默认托管文件夹为wwwroot。

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

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

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

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

【讨论】：

【解决方案2】：

至少对于 .net core 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。

不管怎样，试一试。

【讨论】：