时间戳

首页 > 解决方案 > 带有.NET核心后端api和区域的Vue应用程序，使用webpack，Vue没有加载

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

问题描述

我最近承担了将具有大量重叠功能的 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(routes => { routes.MapRoute( name: "app1", template: "{app1:exists}/{controller=Home}/{action=Index} /{ID？}” ）;

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

另一个就像那条路线一样app2。因为我可以看到 for 的内容，index.cshtml我app1真的很困惑为什么 Vue 没有加载。准系统演示在这里。

标签： vue.jswebpack.net-coreasp.net-mvc-areas

解决方案

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

推荐阅读