使用 Kestrel 托管 vue 应用程序

基于 kestrel 部署服务

前置知识：了解 asp.net mvc 或 asp.net webapi

部署 vue3 项目

• web项目构建
  使用 npm run build 构建，会生成一个 dist 目录，该目录下的文件就是我们需要部署的前端项目文件。

• 服务器构件
  创建一个 asp.net mvc 项目或者 asp.net webapi 项目，将 dist 目录下的所有文件拷贝到 wwwroot 目录。

同时配置：

// 配置端点到根 index.html 文件，这样才能使用 vue 的路由组件。
app.UseEndpoints(app =>
{
    app.MapFallbackToFile("index.html");
});

/*
当您直接访问https://localhost:7132/index.html时，请求将被发送到服务器，并根据请求的URL路径寻找对应的静态文件。如果服务器上存在一个名为index.html的文件，服务器将根据文件的内容作为响应返回给客户端。
在这个过程中，服务器并不会对URL进行任何额外的处理或解析路径，而是仅仅将请求匹配到存在的文件。这意味着服务器不会触发后续的路由处理、中间件执行，也不会执行脚本或处理JavaScript逻辑。
简而言之，服务器仅根据URL路径匹配静态文件并将其返回给客户端。因此，在直接访问https://localhost:7132/index.html时，Vue的路由系统不会被激活，因为服务器只是简单地返回index.html文件，不会对其进行处理。
反之，在使用https://localhost:7132/进行访问时，服务器同样会匹配到存在的index.html文件并返回。但由于Vue的路由系统会监听URL变化并进行相应的路由处理，因此Vue的路由逻辑会在客户端进行处理和激活。
这解释了为什么直接访问https://localhost:7132/index.html无法激活Vue的路由系统，而使用https://localhost:7132/可以。如前所述，为了确保在不直接访问根URL的情况下路由仍然可以正常工作，我们可以在服务器端添加回退路由来处理这种情况。

具体来说，当您在浏览器中加载包含Vue应用程序的页面时，Vue应用程序会开始执行，并监听URL的变化。当URL发生变化时，Vue应用程序会根据路由配置确定要加载的组件，并将其渲染在页面上。
这与传统的服务器端路由处理机制有所不同。在传统的服务器端路由处理中，服务器接收到客户端请求后会根据路由配置来确定要返回的内容，然后服务器会对请求进行处理。
但在客户端的Vue应用程序中，路由是由浏览器中的Vue应用程序自行处理的。服务器仅返回初始的HTML文件（通常是index.html），而后续的路由和组件加载是在浏览器中进行的。
这就是为什么当我们直接访问https://localhost:7132/index.html时，服务器只是简单地返回index.html文件，而不触发Vue路由逻辑的原因。虽然<script>标签中的JavaScript代码会在浏览器端执行，但后续的Vue路由系统不会被激活。
*/

• 然后正常发布 asp.ent 项目即可。