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这一段浏览器会报错误,注释掉就会在浏览器显示一个空白页;
            // 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': '*',
        },
    },

 希望大家开发愉快。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值