Lazy Route предварительно загружается, игнорируя комментарии webpack magi c (Vue) - PullRequest
Новая
       61

Lazy Route предварительно загружается, игнорируя комментарии webpack magi c (Vue)

1 голос
/ 08 мая 2020

Мне нужно разработать приложение с аутентификацией на стороне сервера с представлением входа в систему. Если я хочу использовать Vue Router для динамического переключения между входом в систему и индексом (защищенное представление), мне нужно избегать загрузки (предварительной выборки) индекса входа в систему до успешной аутентификации, потому что в противном случае сервер ответит страницей входа в запрос предварительной выборки индекса.

Я пытаюсь добиться этого в исходном примере Vue Router, который имеет два маршрута. Дом и про. Первый включен, а второй загружается лениво (но предварительно загружается), что является защищенной страницей в реальном приложении.

Чтобы избежать предварительной загрузки, я перепробовал все комментарии webpack magi c Я нашли, но предварительная выборка все еще происходит.

Вот код: 

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;

И вот результат:

network result

Я не хочу отключать эту функцию из общей конфигурации веб-пакета, потому что я хочу, чтобы она использовалась для остальных ссылок приложения. Я хочу отключить его только для этой ссылки.

Как мне настроить маршрутизатор для этого?

Спасибо за ваше время,

H25E

1 Ответ

1 голос
/ 11 мая 2020

На Github есть обсуждение , которое предлагает несколько советов, относящихся к вашей ситуации. 

// vue.config.js

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

Vue -CLI по умолчанию автоматически выполняет предварительную выборку всех динамических c импортируемых файлов, поэтому вам нужно добавить черный список.

Комментарии magi c для Webpack (webpackPrefetch и, вероятно, webpackPreload тоже) принимают либо true, либо число (индекс), но не принимают false аргумент.

...