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': '*', }, },
希望大家开发愉快。
