1

我正在寻找有关以下技术以及如何最好地集成/设置前进关注点的指导......

我们有许多使用 asp.net 和 asp.net core 的现有 Web 应用程序。我们希望利用最新的 JavaScript 框架 vue/angular 来更新和推动它们。目前，我们正在使用 vue，因为考虑到我们当前基于淘汰赛的框架，我们认为这是最简单的跳跃。无论正在考虑的特定 javascript 框架如何，这些问题/担忧都是相似的

目前我们正在使用框架各自的 cli 工具，构建项目/解决方案，然后将 ClientApp 复制到 vs.net 中的同名文件夹（然后更新 startup.cs）以与 hmr 技术集成。

  1. 注意事项...最好跳入完整的 spa 类型方法并完全摆脱页面级编码？虽然这可能最适合学习，但我们确实需要在不完全重写的情况下迁移现有应用程序的方法。这两种方法能否在同一个解决方案中轻松使用（我们目前正在迁移到 vue）。是否有显示这种组合方法的 git 存储库？我相信最好的答案是组合。一种解决方案，其中路由可以使用历史 mvc 路由到控制器/方法和视图，而其他路由可以一起路由到各个 spa 页面。我还没有找到演示这种组合的存储库。很难找到它可能有一个很好的理由。

  2. 关于 vue.js，我们修改了 Startup.cs 以依赖 vue cli 3 vue-cli-service 来服务我们的页面

    app.UseSpa(spa => {    spa.Options.SourcePath = "ClientApp";    
if (env.IsDevelopment())
{
    //spa.UseReactDevelopmentServer(npmScript: "start");    
    // run npm process with client app
    spa.UseVueCli(npmScript: "serve", port: 8080);
    // if you just prefer to proxy requests from client app, use proxy to SPA dev server instead,
    // app should be already running before starting a .NET client:
    // spa.UseProxyToSpaDevelopmentServer("http://localhost:8080"); // your Vue app port
}    });

我还看到了解决方案，他们修改了 Startup 以直接使用 app.UseWebpackDevMiddleware 并指向 cli-service/webpack.config.js 

 app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            {
                HotModuleReplacement = true,
                ConfigFile = Path.Combine(env.ContentRootPath, @"node_modules\@vue\cli-service\webpack.config.js")
            });

这里的两种方法都可以正常工作，但我质疑我们应该将哪一种方法确定为最佳方法。从本质上讲，我觉得最好还是使用 #1，因为它最符合 vue cli 文档，其中使用 UseWebpackDevMiddleware 可能只会增加更多混乱。

4

0 回答 0