带有.NET核心后端api和区域的Vue应用程序，使用webpack，Vue没有加载答案

【问题标题】：Vue app with .NET core backend api with Areas, using webpack, Vue is not loading带有.NET核心后端api和区域的Vue应用程序，使用webpack，Vue没有加载
【发布时间】：2019-01-31 14:14:53
【问题描述】：

我最近承担了将具有大量重叠功能的 2 个应用程序合并到一个应用程序中的任务。我使用 Vue 作为前端库并使用来自 .NET 核心后端的数据。 Webpack 提供了所有其他的魔法。我决定使用区域来分离不同的功能，所以我在 webpack.config.js 中有 2 个入口点。

module.exports = {
context: __dirname,
entry: {
    app1: "./app1/bootApp.js",
    app2: "./app2/bootApp.js"
}

当我运行应用程序时，我得到了index.cshtml 的内容，但没有别的。 Vue 没有被加载。

我已经为这些区域定义了路线，如下所示： ` app.UseMvc(路由 => { 路线.MapRoute( 名称：“app1”，模板：“{app1:exists}/{controller=Home}/{action=Index}/{id?}” );

   routes.MapAreaRoute(
   name: "default",
     areaName: "app1",
     template: "{controller=Home}/{action=Index}/{id?}"
    );

还有一条类似app2 的路线。因为我可以看到app1 的index.cshtml 的内容，我真的很困惑为什么Vue 没有加载。准系统演示 here.

【问题讨论】：

标签： vue.js webpack .net-core asp.net-mvc-areas

【解决方案1】：

经过一天的挖掘，我找到了解决问题的方法。 index.cshtml 文件加载得很好，并且按照惯例有一个 id 为 app 的元素，但我首先决定尝试放弃框架默认的 _Layout.cshtml 文件和 _ViewStart.cshtml 文件。我们已将 Vue 集成到的其他 MVC 应用程序中的布局文件在 head 部分中有一个元素，如下所示：<base href="/" />。在路由器中，我们将根路由路径定义为"/"，因此通过跳过包含基本元素的布局文件，Vue 似乎没有任何东西可以附加根路由和所有后续的相关链接。所以索引页面渲染得很好，但 Vue 从未加载。

【讨论】：