如何将 ASP.NET Core 2.1 与 Vue CLI 3 集成？
how to integrate ASP.NET Core 2.1 with Vue CLI 3?
我一直在尝试使用带有 ASP.Net Core web 的新 Vue CLI 3 创建一个新项目。我可以使用 dotnet new 创建一个漂亮的新空白 Web 项目，也可以使用 vue create 创建一个新的 Vue.js Hello World 模板，但我终究无法让它们协同工作。
应该很简单
- 创建一个新的 dotnet 项目
- 在 dotnet 解决方案中创建一个文件夹。比如VueApp、ClientApp什么的。
- 使用 Vue cli 在该文件夹中搭建一个新的 Vue 项目。
- 将输出目录更改为指向类似“../../wwwroot/dist”的内容
- 构建您的应用程序。请注意，如果您是为开发或生产而构建，输出结构会有所不同。
- 在您的
_Layout.cshtml 或 Index.cshtml 中，无论您想如何组织它，请参考那些输出的文件。
- 将
<div id="app"></div> 添加到您的 .cshtml。
- 大功告成，尽情享受吧。
我在 Medium 上写了一个详细的教程。
您可以使用 Microsoft Microsoft.AspNetCore.SpaServices NuGet 包来指定 SpaStaticFiles 文件夹，而不是将构建时的客户端应用程序复制到 wwwroot 并忽略 *.cshtml 文件并直接使用 vue index.html 文件。
您还可以在 .NET 应用程序启动时使用 Vue CLI 3.0 将 VueCliMiddleware NuGet 安装到 运行 npm 进程与客户端应用程序。
我一直在尝试使用带有 ASP.Net Core web 的新 Vue CLI 3 创建一个新项目。我可以使用 dotnet new 创建一个漂亮的新空白 Web 项目，也可以使用 vue create 创建一个新的 Vue.js Hello World 模板，但我终究无法让它们协同工作。
应该很简单
- 创建一个新的 dotnet 项目
- 在 dotnet 解决方案中创建一个文件夹。比如VueApp、ClientApp什么的。
- 使用 Vue cli 在该文件夹中搭建一个新的 Vue 项目。
- 将输出目录更改为指向类似“../../wwwroot/dist”的内容
- 构建您的应用程序。请注意，如果您是为开发或生产而构建，输出结构会有所不同。
- 在您的
_Layout.cshtml或Index.cshtml中，无论您想如何组织它，请参考那些输出的文件。 - 将
<div id="app"></div>添加到您的.cshtml。 - 大功告成，尽情享受吧。
我在 Medium 上写了一个详细的教程。
您可以使用 Microsoft Microsoft.AspNetCore.SpaServices NuGet 包来指定 SpaStaticFiles 文件夹，而不是将构建时的客户端应用程序复制到 wwwroot 并忽略 *.cshtml 文件并直接使用 vue index.html 文件。
您还可以在 .NET 应用程序启动时使用 Vue CLI 3.0 将 VueCliMiddleware NuGet 安装到 运行 npm 进程与客户端应用程序。