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