Lazy Route被预取，忽略webpack魔术注释（Vue）

Question

我需要开发一个具有登录视图的服务器端身份验证的应用程序。如果要使用Vue Router在登录和索引（受保护的视图）之间动态切换，则需要在成功进行身份验证之前避免登录视图下载（预取）索引，因为如果不成功，服务器将使用登录页面对索引进行预取请求。

我正在尝试在具有两个路由的原始Vue路由器示例中实现这一目标。家和约。包含第一个，第二个被延迟加载（但已预取），这将成为实际应用程序中的受保护页面。

为了避免预取，我已经尝试了所有发现的webpack魔术注释，但是预取仍在进行中。

这里是代码：

import Vue from "vue"
import VueRouter from "vue-router"
import Home from "../views/Home.vue"

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about"*/ /* webpackMode: "lazy" */ /* webpackPrefetch: false */ /* webpackPreload: false */ "../views/About.vue")
  }
];

const router = new VueRouter({
  routes
});

export default router;

这里是结果：

我不想从常规的webpack配置中禁用该功能，因为我希望在其余的应用程序链接中使用它。我只想对此链接禁用它。

我应该如何配置路由器以实现它？

感谢您的时间，

H25E

Answer 1

discussion on Github提供了一些与您的情况有关的提示。

// vue.config.js

module.exports = {
  chainWebpack: config => {
    config.plugin('prefetch').tap(options => {
      options.fileBlackList.push([/MyChunkName(.*)\.js$/]);
      return options;
    });
  }
};

Vue-CLI默认情况下会自动预提取所有动态导入-因此您必须添加黑名单。

Webpack的神奇注释（webpackPrefetch可能还有webpackPreload也接受true或数字（索引）-但不接受false参数。