WTMPlus Vue3版开发环境优化

用过WTMPlus Vue3版本的群友都知道，启动项目的时候每次都要执行一大段命令，可能我们只是修改后端，前端都没有更动，那一长段编译前端的命令就有点多余，问题是编译时间还不短，这些执行时间大大拖慢了开发效率；

通过几个地方修改可以缓解这个问题；

修改 startup.cs

修改前：

        public void Configure(IApplicationBuilder app, IOptionsMonitor<Configs> configs, IHostEnvironment env)
        {
            app.UseExceptionHandler(configs.CurrentValue.ErrorHandler);
            app.UseStaticFiles();
            app.UseWtmStaticFiles();
            app.UseSpaStaticFiles();
            app.UseWtmSwagger();
            app.UseRouting();
            app.UseWtmMultiLanguages();
            app.UseWtmCrossDomain();
            app.UseAuthentication();
            app.UseAuthorization();
            app.UseSession();
            app.UseWtm();

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

                if (env.IsDevelopment())
                {
                    endpoints.MapToVueCliProxy(
                        "{*path}",
                        new SpaOptions { SourcePath = "ClientApp" },
                        npmScript: "start",
                        regex: "No issues found.");
                }
            });
            
            app.UseWtmContext();
            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";
            });
        }

修改后：

        public void Configure(IApplicationBuilder app, IOptionsMonitor<Configs> configs, IHostEnvironment env)
        {
            app.UseExceptionHandler(configs.CurrentValue.ErrorHandler);
            app.UseStaticFiles();
            app.UseWtmStaticFiles();
            app.UseSpaStaticFiles();
            app.UseWtmSwagger();
            app.UseRouting();
            app.UseWtmMultiLanguages();
            app.UseWtmCrossDomain();
            app.UseAuthentication();
            app.UseAuthorization();
            app.UseSession();
            app.UseWtm();

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

                if (env.IsDevelopment())
                {
                    //endpoints.MapToVueCliProxy(
                    //    "{*path}",
                    //    new SpaOptions { SourcePath = "ClientApp" },
                    //    npmScript: "start",
                    //    regex: "No issues found.");
                }
            });
            
            app.UseWtmContext();
            // 注释这一段代码浏览器只会显示一个空白页
            //app.UseSpa(spa =>
            //{
            //    spa.Options.SourcePath = "ClientApp";
            //});
        }

注意注释的那一部分代码，就是开发环境每次启动都执行 npm start 命令；

启动项目，如果没注释 app.UseSpa这一段浏览器会报错误，注释掉就会在浏览器显示一个空白页；

System.InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request.
<br />   at Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware.<>c__DisplayClass0_0.<Attach>b__1(HttpContext context, Func`1 next)<br />   at Microsoft.AspNetCore.Builder.UseExtensions.<>c__DisplayClass0_1.<Use>b__1(HttpContext context)<br />   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.TryServeStaticFile(HttpContext context, String contentType, PathString subPath)<br />   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)<br />   at Microsoft.AspNetCore.Builder.UseExtensions.<>c__DisplayClass0_2.<Use>b__2()<br />   at Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware.<>c__DisplayClass0_0.<Attach>b__0(HttpContext context, Func`1 next)<br />   at Microsoft.AspNetCore.Builder.UseExtensions.<>c__DisplayClass0_1.<Use>b__1(HttpContext context)<br />   at Microsoft.AspNetCore.Routing.EndpointMiddleware.Invoke(HttpContext httpContext)<br />   at WalkingTec.Mvvm.Mvc.WtmMiddleware.InvokeAsync(HttpContext context, IOptionsMonitor`1 configs)<br />   at Microsoft.AspNetCore.Session.SessionMiddleware.Invoke(HttpContext context)<br />   at Microsoft.AspNetCore.Session.SessionMiddleware.Invoke(HttpContext context)<br />   at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)<br />   at Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)<br />   at Microsoft.AspNetCore.Localization.RequestLocalizationMiddleware.Invoke(HttpContext context)<br />   at Swashbuckle.AspNetCore.SwaggerUI.SwaggerUIMiddleware.Invoke(HttpContext httpContext)<br />   at Swashbuckle.AspNetCore.Swagger.SwaggerMiddleware.Invoke(HttpContext httpContext, ISwaggerProvider swaggerProvider)<br />   at Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware.<Invoke>g__Awaited|6_0(ExceptionHandlerMiddleware middleware, HttpContext context, Task task)

不用管它，后端程序也没有退出,我们进入ClientApp目录，打开终端软件

> @wtm/vue3@0.1.0 start F:\Proejcts\MyTest3a\MyTest3\ClientApp
> vue-cli-service serve

------------------------------------ create font ------------------------------------
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 24118ms                                                                      下午3:27:49


  App running at:
  - Local:   http://localhost:8002/
  - Network: http://192.168.1.128:8002/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

No issues found.

我们在浏览器里面打开 http://localhost:8002/ 就正常打开页面了；

注意：通过在Vs里面启动项目打开的浏览器不要关闭，要不后端程序就关闭了；

后端WebAPi如果需要修改和重新启动，速度大大提高；

前端Vue3如果要修改，直接修改代码保存，通过npm热更新机制，很快就看到修改效果，前端的开发效率也得到很大提高；

如果要修改前后端服务监听地址，可以修改 ClientApp/vue.config.js.

 devServer: {
        proxy: 'http://localhost:24497',
        hot: true,
        disableHostCheck: true,
        port: 8002,
        overlay: {
            warnings: false,
            errors: true,
        },
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },

 

 希望大家开发愉快。