在 aspnetcore 中部署 vue 项目

现在开发项目一般是前后端分离的，这样做有诸多好处自不必说，现在要说一个缺点，就是一个项目往往要多端部署，api 一个，前端项目一个（VUE）,后台管理一个（VUE）虽然可以使用 nginx 放在一个域名下面，感觉还是不理想，现在尝试把 vue 部署到 asp.netcore3.1 的静态文件服务中去。

场景：api 项目(aspnetcore)，fe 前端项目使用 hash 路由(vue)，admin 后端项目使用 history 路由(vue)。

发布 fe 到根目录/fe 下面，发布 admin 到 api 项目/admin 下面，然后配置 api 项目的静态文件服务。

            //后台管理vue根目录
            app.UseStaticFiles(new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(Path.GetFullPath("./admin")),
                RequestPath = "/admin"
            });
            //前台页面vue跟目录
            app.UseStaticFiles(new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(Path.GetFullPath("./fe")),
                RequestPath = "/fe"
            });

由于是生成的单页面，api 项目还需要做特殊路由处理：

app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");

		//处理vue的路由
                endpoints.MapFallback(async context =>
                {
                    if (context.Request.Path.StartsWithSegments("/fe", StringComparison.Ordinal))
                    {
                        var html = await File.ReadAllTextAsync(Path.GetFullPath("./fe/index.html"));
                        context.Response.ContentType = "text/html";
                        await context.Response.WriteAsync(html, Encoding.UTF8);
                    }
                    else if (context.Request.Path.StartsWithSegments("/admin", StringComparison.Ordinal))
                    {
                        context.Response.Redirect("/admin/index.html");
                    }
                    else
                    {
                        context.Response.StatusCode = (int) HttpStatusCode.NotFound;
                    }
                });
            });

因为 vue 项目使用不同的路由方式，这里需要做不同的处理逻辑。

当然前台 vue 项目也需要设置两个地方，第一个是路由的 base 要设置成‘/fe’和‘/admin’。

第二个 vue.config.js 中设置 publicPath:process.env.NODE_ENV==='production'?'/admin/':'/'

这样就完成了我们的目标。