有没有办法使用 .NET MVC 提供 vue.js statc 文件？

Posted 2023-02-23

【中文标题】有没有办法使用 .NET MVC 提供 vue.js statc 文件？

【英文标题】：Is there a way to serve vue.js statc file with .NET MVC?

【发布时间】：2021-03-29 03:05:58

【问题描述】：

我得到了一个由 vue-cli 生成的示例 vue 应用，它使用 npm run build 命令生成静态文件。

通常您使用 node.js 中的服务器来提供文件，但我想知道是否有办法从我的 ASP.NET MVC 应用程序中提供这些文件。

我之所以这么问是因为我需要展示 Vue.js 的工作原理，因为我们正在考虑放弃 Knockout.js。

【问题讨论】：

你想在 mvc 应用的特定文件夹中提供这个 vue 应用吗？

这有帮助吗？ ***.com/questions/55988045/…

这个问题给了我洞察力，但这是针对 .NET Core 的，目前我们仍在使用 .NET MVC，我认为我的老板不会很快搬家。

@Nilesh Patel，Scripts 文件夹可以正常工作，但也欢迎其他任何工作。

@Christopher 这有帮助吗？ tutorialsteacher.com/core/…

【参考方案1】：

我找到了解决方案：

我们可以轻松使用使用 vue-cli 创建的任何示例 vue 应用程序。因为这实际上是通过 HTTP 服务器提供静态文件的问题，这将在 .NET MVC 中工作。

在项目中的任何位置创建您的 vue 应用。我个人建议您在 .net mvc 项目的根级别创建它。

添加一个 vue.config.js 文件并指定 publicPath，它将确定生成所有静态文件的文件夹的路径。

添加一个控制器来提供将由 vue 应用创建的静态文件。

为获得最佳实践，请确保控制器的名称与 publicPath 中指定的文件夹名称相同。

例子：

vue.config.js

module.export = 
  publicPath:'~/Dist'

public class DistController : Controller 

仅当您的应用中有 VUE 路由器时才适用：

对于您在 vue-router 中定义的每个路由，请确保您有一个与该路由的路径同名的 Action 方法。每个方法都需要返回生成的静态html或cshtml文件。

注意：对于您的主要组件，请确保使用自定义路径名，即（不使用“/”）

例子：

const router = new VueRouter(
  routes: [
     path: '/home', component: Home ,
     path: '/login', component: Login ,
     path: '/about', component: About 
  ]
)

public class DistController : Controller 

        public ActionResult home()
        
          return new FilePathResult("~/Html/index.html", "text/html");
        


        public ActionResult about()
        
          return new FilePathResult("~/Html/index.html", "text/html");
        

        public ActionResult login()
        
           return new FilePathResult("~/Html/index.html", "text/html");
        

构建您的生产项目：

在发表此评论时，您可以使用以下命令来执行此操作：

npm run build

将生成包含所有静态文件的文件夹。

【参考方案2】：

ASP.NET 应用程序中的客户端路由

回复较晚，但要分享，因为简单的答案很难找到。 UseStaticFiles() 的使用有据可查，适用于 SPA直到页面刷新或使用直接 url 访问应用程序。 要启用客户端路由，可以配置回退路径以将任何未解析的服务器端路由传递给客户端应用程序。

简要说明

假设您的 Vue 应用程序（或任何 SPA）被复制到名为 wwwroot 的根目录中：

在 Startup.cs 的 Configure() 中，添加 UseDefaultFiles() 和 UseStaticFiles() 以便可以找到并提供 index.html。

支持客户端路由的关键是向UseEndpoints() 添加一个后备端点。任何未在服务器端处理的路由都将传递给客户端应用并成功路由。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

  app.UseHttpsRedirection();

  // Important: UseDefaultFiles() before UseStaticFiles()
  app.UseDefaultFiles();
  app.UseStaticFiles();

  app.UseRouting();

  app.UseEndpoints(endpoints =>
  
     endpoints.MapControllers();
     // Routing magic: Pass route to client app
     endpoints.MapFallbackToFile("/index.html");
  );

参考：https://weblog.west-wind.com/posts/2020/Jul/12/Handling-SPA-Fallback-Paths-in-a-Generic-ASPNET-Core-Server