如何在 ASP.NET Core 3 中处理多个 VueJS SPA 应用程序

Question

我有一个 ASP.NET Core Web API 应用程序，我想为两个 VueJS 应用程序提供服务，一个用于Admin，一个用于Users。

所以我做了这样的设置配置：

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);
        });
    }
);  

这是项目结构：

问题是，当我尝试访问管理页面时，例如： 它没有正确加载脚本。

我发现问题是因为我没有将前缀“admin”添加到 VueJS Javascript 路径。

如何添加此前缀？有可能吗？

问候

Answer 1

因为你的 vue base url 不是 "/"，你需要在每个 vuejs 项目根目录的 vue.config.js 中设置publicPath

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

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