如何将 ASP Core Web API VueJS 站点部署到 IIS答案

【问题标题】：How to deploy ASP Core Web API VueJS site to IIS如何将 ASP Core Web API VueJS 站点部署到 IIS
【发布时间】：2020-10-01 18:05:45
【问题描述】：

总的来说，我是 VueJS 和 SPA 的新手。我创建了一个新的 ASP Core 站点，其中包含一个用于数据的 WebAPI 控制器和一个 VueJS 前端。我现在正在尝试将此站点部署到 IIS，但我不确定如何正确执行此操作。我在 IIS 中创建了一个新应用程序，应用程序池设置为“无托管代码”，并将物理位置设置为 VueJS 应用程序 /dist 文件夹。该网站正在加载，但我的所有服务调用都收到 404。我认为这是因为站点的根目录设置为 VueJS 应用程序文件夹，而不是 ASP Core 文件夹的根目录。如何正确设置它以从 myServer/mySite 为我的应用程序提供服务，并将我的服务端点设置为 myServer/mySite/api/myController/myAction？

【问题讨论】：

最简单的方法是将您的应用程序和 api 放在不同的网站上，例如 app.example.com 和 api.example.com。在 axios 中，您可以为您的 api 调用设置一个基本 url，以便它知道您的 api 在哪里。 dotnet 还有 Microsoft.AspNetCore.SpaServices.Extensions 包，可以添加中间件来提供 Vue js 文件。
在iis中部署vue js应用需要运行这个命令：npm run build。如果构建成功，你可以找到名为“dist”的文件夹。使用这个文件夹作为站点路径iis。例如：C:\vueapp\dist
@Rosco 谢谢，我曾考虑过这一点，但我希望有另一种方法。这似乎不是正确的方法。不过，如果我不明白，这将不得不这样做。

标签： vue.js asp.net-core iis asp.net-web-api

【解决方案1】：

场景：您的 dotnet 核心应用程序具有 API 端点，并且您希望在同一站点上托管客户端站点 SPA。 API 调用将通过 dotnet 应用程序，任何其他请求将服务于 SPA 的 index.html。

.NET 核心通过 Microsoft.AspNetCore.SpaServices 命名空间中的方法（如 UseSpa()）支持此场景

另请注意，在 .NET 5 中，这些扩展正在移动到单独的包 Microsoft.AspNetCore.SpaServices.Extensions。它现在可用，但没有很好的记录。

在此示例中，您的构建 SPA 应放入 ClientApp/dist

例如

using Microsoft.AspNetCore.SpaServices;

public class Startup
{
    // ...

    public void ConfigureServices(IServiceCollection services)
    {
        // In production, the SPA files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist";
        });
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        // ...

        app.UseStaticFiles();
        app.UseSpaStaticFiles();

        app.UseMvc();

        // Must be near the end of the method because 
        // it will send any unhandled requests to index.html for SPA
        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                // Development requests are send through to local node server
                spa.UseProxyToSpaDevelopmentServer("http://localhost:8080/");
            }
        });
    }
}

【讨论】：