How to integrate Vue.js and ASP.NET Core using SPA Extension

Thanks for posting this article! Is it possible to host multiple Vue apps on a single core project?  The closest solution I've found is here (https://stackoverflow.com/questions/62723319/how-to-handle-multiple-vuejs-spas-application-in-asp-net-core-3), but I'm running into a similar issue the OP is having.

I have a project folder structure like this:

• ASP.NET Core Project
  • Properties
  • Contollers 
  • Vue
    • public-app
      • node_modules
      • public
      • etc...
    • private-app
      • node_modules
      • public
      • etc...
  • Startup.cs
  • VueHelper.cs
  • Etc...

VueHelper.cs has been modified to send different working folder and port.

public static void UseVueDevelopmentServer(this ISpaBuilder spa, string sourcePath, int port)
{
    spa.UseProxyToSpaDevelopmentServer(async () =>
    {
    	...
        Port = port;
        DevelopmentServerEndpoint =  new Uri($"http://localhost:{Port}");

        var isWindows = RuntimeInformation.IsOSPlatform(OSPlatform.Windows);
        var processInfo = new ProcessStartInfo
        {
            FileName = isWindows ? "cmd" : "npm",
            Arguments = $"{(isWindows ? "/c npm " : "")}run serve",
            WorkingDirectory = sourcePath,
            RedirectStandardError = true,
            RedirectStandardInput = true,
            RedirectStandardOutput = true,
            UseShellExecute = false,
        };
        ...
    };
}

Startup.cs has the map functions added

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
    // connect vue app - middleware
    services.AddSpaStaticFiles(options => options.RootPath = "vue/public/dist");
    services.AddSpaStaticFiles(options => options.RootPath = "vue/private/dist");
}


public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
   ...
    app.Map("/public", app1 =>
    {
        app1.UseSpa(spa => {
            spa.Options.SourcePath = "vue/public";
            if (env.IsDevelopment())
            {
                spa.UseVueDevelopmentServer("vue/public", 8080);
            }
        });
    });

    app.Map("/private", app2 =>
    {
        app2.UseSpa(spa => {
            spa.Options.SourcePath = "vue/private";
            if (env.IsDevelopment())
            {
                spa.UseVueDevelopmentServer("vue/private", 8081);
            }
        });
    });
}

Also tried to modify the project file.

	<PropertyGroup>
		<TargetFramework>netcoreapp3.1</TargetFramework>
		<SpaRoot1>vue\public\</SpaRoot1>
		<SpaRoot2>vue\private\</SpaRoot2>
		<DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot1)node_modules\**;$(SpaRoot2)node_modules\**</DefaultItemExcludes>
		<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
		<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
		<IsPackable>false</IsPackable>
	</PropertyGroup>


	<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">

		<Exec WorkingDirectory="$(SpaRoot1)" Command="npm install" />
		<Exec WorkingDirectory="$(SpaRoot1)" Command="npm run build" />

		<Exec WorkingDirectory="$(SpaRoot2)" Command="npm install" />
		<Exec WorkingDirectory="$(SpaRoot2)" Command="npm run build" />

		<ItemGroup>
			<DistFiles Include="$(SpaRoot1)dist\**" />
			<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
				<RelativePath>%(DistFiles.Identity)</RelativePath>
				<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
			</ResolvedFileToPublish>
		</ItemGroup>

		<ItemGroup>
			<DistFiles Include="$(SpaRoot2)dist\**" />
			<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
				<RelativePath>%(DistFiles.Identity)</RelativePath>
				<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
			</ResolvedFileToPublish>
		</ItemGroup>

	</Target>