用过WTMPlus Vue3版本的群友都知道，启动项目的时候每次都要执行一大段命令，可能我们只是修改后端，前端都没有更动，那一长段编译前端的命令就有点多余，问题是编译时间还不短，这些执行时间大大拖慢了开发效率；
通过几个地方修改可以缓解这个问题；
修改 startup.cs
修改前：
public void Configure(IApplicationBuilder app, IOptionsMonitorconfigs, 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, IOptionsMonitorconfigs, 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.
at Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware.<>c__DisplayClass0_0.b__1(HttpContext context, Func`1 next)
at Microsoft.AspNetCore.Builder.UseExtensions.<>c__DisplayClass0_1.
不用管它，后端程序也没有退出,我们进入ClientApp目录，打开终端软件
> @wtm/vue3@0.1.0 start F:ProejctsMyTest3aMyTest3ClientApp > 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': '*',
},
},
希望大家开发愉快。
