vue.js - 如何将 ASP.NET Core 2.1 与 Vue CLI 3 集成？

Question

我一直在尝试使用带有 ASP.Net Core web 的新 Vue CLI 3 创建一个新项目。我可以使用 dotnet new 创建一个漂亮的新空白 Web 项目，也可以使用 vue create 创建一个新的 Vue.js Hello World 模板，但我一辈子都无法让它们一起工作。

Answer 1

我在Medium上写了一个详细的教程。

您可以使用 Microsoft Microsoft.AspNetCore.SpaServicesNuGet 包指定 SpaStaticFiles 文件夹，而不是将构建时的客户端应用程序复制到 wwwroot 并忽略 *.cshtml 文件并直接使用 vueindex.html文件。

当您的 .NET 应用程序启动时，您还可以安装VueCliMiddlewareNuGet 以使用 Vue CLI 3.0 使用客户端应用程序运行 npm 进程。

Answer 2

这应该很简单

• 创建一个新的 dotnet 项目
• 在 dotnet 解决方案中创建一个文件夹。例如，VueApp、ClientApp 之类的。
• 使用 Vue cli 在该文件夹中搭建一个新的 Vue 项目。
• 将输出目录更改为指向“../../wwwroot/dist”之类的内容
• 构建您的应用程序。请注意，如果您是为开发或生产构建，输出结构会有所不同。
• 在您的_Layout.cshtml或Index.cshtml中，无论您想如何组织它，请参考那些输出的文件。
• 添加<div id="app"></div>到您的.cshtml.
• 你完成了，享受。