asp.net-mvc - How to handle multiple VueJS SPAs application in ASP.NET Core 3

Question

I have an ASP.NET Core Web API application, I want to serve two VueJS apps, one for Admin and one for Users.

So I did the setup configuration like this:

app.Map("/users",
    adminApp =>
    {
        adminApp.UseSpa(spa =>
        {
            spa.Options.SourcePath = "AppFront";
            spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "AppFront"))
            };
            spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
            spa.UseVueCli(npmScript: "serve", port: 4200);
        });
    }
);

app.Map("/admin",
    adminApp =>
    {
        adminApp.UseSpa(spa =>
        {
            spa.Options.SourcePath = "AppAdmin";
            spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "AppAdmin"))
            };
            spa.UseProxyToSpaDevelopmentServer("http://localhost:4201");
            spa.UseVueCli(npmScript: "serve", port: 4201);
        });
    }
);  

Here is the project structure:

The problem is, when I tried to access the admin page, for example: It is not loading the script correctly.

I found that the problem is because I'm not adding the prefix "admin" to VueJS Javascript path.

How can I add this prefix? Is it possible?

Regards

标签： asp.net-mvcvue.jsasp.net-coresingle-page-application

Answer 1

因为您的 vue 基础 url 不是“/”，所以您需要在每个 vuejs 项目根目录的 vue.config.js 中设置publicPath

// ./AppAdmin/vue.config.js
module.exports = {
  publicPath: '/admin'
}

// ./AppFront/vue.config.js
module.exports = {
  publicPath: '/users'
}