【Vue】Vue与ASP.NET Core WebAPI的集成

SPA单页面应用已经遍地开花，熟知的三大框架，Angular、Vue和React，其中Angular与React均可集成至ASP.NET Core，且提供了相关了中间件。但是Vue没有:

“
As far as I’m aware, we don’t have plans to introduce Vue-specific features. This isn’t because we have anything against Vue, but rather just to limit the growth in the number of frameworks that we’re maintaining support for. The dev team only has a finite capacity for handling third-party concepts, and last year we made the strategic choice to focus on only Angular and React.

本篇将介绍如何集成Vue。

1.集成的效果

SPA与ASP.NET Core集成后。根据需求不同，是可以达到两种不同效果。

1.1 一键开启

通过Vistual Studio-->F5,便可以直接启动前端应用开发模式和后台api服务，且再用一个端口下。这种方便单人开发运行，调试。

app.UseSpa(spa =>{spa.Options.SourcePath = "ClientApp";if (env.IsDevelopment()){//spa.UseReactDevelopmentServer(npmScript: "start");spa.UseVueCliServer(npmScript: "start");//spa.UseProxyToSpaDevelopmentServer("http://localhost:8080");}});

1.2 独立运行，减轻依赖

另外就是在典型前后端分离的协同开发，常用调试方式启动后端api服务，确定api端口号（假设后端端口为3000），然后去前端配置文件，如vue.config.js修改代理，如下配置：

module.exports = {//omit some config..devServer: {proxy: 'localhost:3000'}
}

然后：

后端启动
前端启动
然后再去访问前端

但是集成后，就不必这样操作，只需要在后端Startup.cs中指定固定的SPA调试服务器地址。

app.UseSpa(spa =>{spa.Options.SourcePath = "ClientApp";if (env.IsDevelopment()){//spa.UseReactDevelopmentServer(npmScript: "start");//spa.UseVueCliServer(npmScript: "start");spa.UseProxyToSpaDevelopmentServer("http://localhost:8080");}});

这样后端开发人员需要再看下前端效果，就不必再去单独看前端，前端一旦启动，端口一般不会变化，做如上配置，便可直接通过Vistual Studio-->F5直接运行。

前端启动
后端启动,直接就反向代理到前端开发服务器,无需再去访问前端。

2.集成的原理

2.1 启动前端

通过中间件调用node进程，执行如下命令：

npm start -- --port {dynamic_port}

dynamic_port是在运行过程中随机一个端口。npm 命令已经存在在 package.json 中配置，它将通过 vue-cli-service serve --port 启动开发服务器。

2.2 代理前端调试服务器

前端调试服务器启动成功后，中间件将会创建一个HttpClient代理：将请求一起转发到前端调试服务器，然后将响应复制为自己的响应，上面UseProxyToSpaDevelopmentServer没有启动前端的过程（因为前端已启动完成），只是把前端请求静态资源的请求代理到前端调试服务器。

3.集成步骤

3.1 安装nuget包

Install-Package Garfield.SpaServices.Extensions.Vue -Version 1.0.0

这是博主根据官方库改写，正如nuget包的文档写的那样：由于官方没有支持Vue，看后续是否支持，如支持，此包将归档废弃。

3.2 创建Vue项目

在API项目创建ClientApp文件，在此文件夹下创建或复制Vue项目。

保证以下目录结构即可:

ClientApp/package.json

3.3 修改package.json

适配后端这边，package.json要做一些调整，主要是端口由后端启动时随机指定可用的。

"scripts": {"start": "vue-cli-service serve --port", //edit here"build": "vue-cli-service build","lint": "vue-cli-service lint","test:unit": "vue-cli-service test:unit","test:e2e": "vue-cli-service test:e2e"
},

3.4 修改Startup.cs

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{//omit some code..app.UseStaticFiles();//PRODUCTION uses webpack static filesif (!env.IsDevelopment()){app.UseSpaStaticFiles();}app.UseSpa(spa =>{spa.Options.SourcePath = "ClientApp";if (env.IsDevelopment()){spa.UseVueCliServer(npmScript: "start");//spa.UseProxyToSpaDevelopmentServer("http://localhost:8080");}});
}

4.还原构建-Build

在我们调试之前，一定是构建项目，但是我们的项目现在是一个包含前端Vue和后端Webapi的前后端分离项目。后端需要还原各种nuget包，在那之前，前端也需要还原npm包，以前博主是执行npm install

这里介绍下使用MSBuild自动执行,修改csproj,增加Target:

<PropertyGroup><!--omit some--><SpaRoot>ClientApp\</SpaRoot>
</PropertyGroup>
<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') "><!-- Ensure Node.js is installed --><Exec Command="node --version" ContinueOnError="true"><Output TaskParameter="ExitCode" PropertyName="ErrorCode" /></Exec><Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." /><Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." /><Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
</Target>

此时就会在Build ASP.NET WebAPI项目前，自动还原前端项目，执行npm install。

5.调试-Debug

从效果上来看，两种集成方式貌似没啥大的差别，但是从开发的调试的角度，有各自运用的场景。

5.1 集成调试

保持上面的配置与代码不变，直接运行ASP.NET Web API

Vue将会自动构建，并与ASP.NET Core WebAPI项目将会集成运行，通过访问localhost:port便可以调试访问应用。

5.2 独立调试

如果后端接口稳定，仅仅是前端问题，那么上面的集成调试是比较方便的。想象一下，每次都要重新启动，执行npm start，还是有点费时间。特别是前端已经足够稳定，后端接口修改频繁，那么这样的方式无疑是太慢了，因为每次都需要重新启动vue项目，失去了集成的优势。所以独立调试后端更符合此类场景。

5.2.1 启动前端

cd ClientApp
npm start 8080

5.2.2 修改后端

// spa.UseVueCliServer(npmScript: "start"); //替换如下代码
spa.UseProxyToSpaDevelopmentServer("http://localhost:8080");

当启动 ASP.NET Core 应用时，它不会启动 Vue dev 服务器，而是使用手动启动的实例。这使它能够更快地启动和重新启动。不再需要每次都等待 Vue CLI重新生成客户端应用。

6.发布-Publish

小项目，我们就不需要nginx去放静态文件，修改配置等等。

以往博主部署这种前后端分离项目，是通过nginx部署静态前端文件，反向代理后端接口。这种方式没问题。但是这里介绍一点新鲜的（至少对博主而言），前端Vue项目通过npm run build构建成一系列的静态文件。这些静态文件就是我们的SPA。说白了，就是一个静态网页。

所以需要静态文件中间件:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{//omit some code..app.UseStaticFiles();if (!env.IsDevelopment()){app.UseSpaStaticFiles();}
}

然后指定我们静态文件的路径：

//Startup.cs
public void ConfigureServices(IServiceCollection services)
{//omit some code..services.AddSpaStaticFiles(c=>{c.RootPath = "ClientApp/dist";});
}

这里我们把Vue项目包含在webapi项目中，文件夹ClientApp，他构建的文件夹为dist，当然这个也是可以修改的。

最重要一步来了，发布时让构建好的静态文件随着WebAPI一起发布，而不需要，单独执行npm run build然后手动拷贝，这里还是用到了MSbuild,所以同样需要修改csproj文件，增加publish的Target：

<PropertyGroup><!--omit some xml..--><SpaRoot>ClientApp\</SpaRoot>
</PropertyGroup>  
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish"><!-- As part of publishing, ensure the JS resources are freshly built in production mode --><!--<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />--><Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" /><!-- Include the newly-built files in the publish output --><ItemGroup><DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" /><ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)"><RelativePath>%(DistFiles.Identity)</RelativePath><CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory><ExcludeFromSingleFile>true</ExcludeFromSingleFile></ResolvedFileToPublish></ItemGroup>
</Target>

大概指令：发布时运行webpack