vue3 编写.netcore可视组件

一、打包vue项目

npm run build

二、新建类库：ClassLibrary2

将vue.js build目录拷贝到类库www目录下，并设置为嵌入资源

 Class1.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.FileProviders.Embedded;
using System.Text;
 
namespace ClassLibrary1
{
    public static class Class1
    {
 
        public static IApplicationBuilder UseCustomMap(this IApplicationBuilder app)
        {
            app.Map("/index", HandleMapMainDoc);
            app.MapWhen(c =>
            {
                return c.Request.Path.Value.StartsWith("/assets/");
            }, HandleMapJsCss);
            
            //保存产品Api
            app.Map("/api/Product", app =>
            {
                app.Run(async context =>
                {
                    context.Response.StatusCode = 200;
                    context.Response.ContentType = "application/json";
                    await context.Response.WriteAsync("{code:0}");
                });
            });
 
            return app;
        }
 
        static void HandleMapMainDoc(IApplicationBuilder app)
        {
            app.Run(async context =>
            {
                var resourceNames = typeof(Class1).Assembly.GetManifestResourceNames();
                var stream = typeof(Class1).Assembly.GetManifestResourceStream("ClassLibrary2.www.index.html");
                var buff = new byte[stream.Length];
                stream.Read(buff, 0, buff.Length);
 
                var text = UTF8Encoding.UTF8.GetString(buff);
                context.Response.StatusCode = 200;
                context.Response.ContentType = "text/html; charset=utf-8";
                await context.Response.WriteAsync(text);
            });
        }
        static void HandleMapJsCss(IApplicationBuilder app)
        {
            app.Run(async context =>
            {
                var resourceNames = typeof(Class1).Assembly.GetManifestResourceNames();
                var path = context.Request.Path.Value;
                var stream = typeof(Class1).Assembly.GetManifestResourceStream($"ClassLibrary2.www{path.Replace("/", ".")}");
                var buff = new byte[stream.Length];
                stream.Read(buff, 0, buff.Length);
 
                var text = UTF8Encoding.UTF8.GetString(buff);
                context.Response.StatusCode = 200;
                if (path.EndsWith(".js"))
                {
                    context.Response.ContentType = "application/javascript";
                }
                if (path.EndsWith(".css"))
                {
                    context.Response.ContentType = "text/css";
                }
                await context.Response.WriteAsync(text);
            });
        }
    }
}

三、项目中引用ClassLibrary2

并在Startup.cs中添加一行

  app.UseCustomMap();

在浏览器输入：http://localhost:5000/index#/