Vue не работает ленивая загрузка роутера или создание отдельных чанков - PullRequest
Новая
       0

Vue не работает ленивая загрузка роутера или создание отдельных чанков

0 голосов
/ 07 апреля 2020

Я пытаюсь выполнить некоторую ленивую загрузку на моих маршрутах, но безуспешно. Вот так выглядит мой индекс. js файлы в папке моего роутера 

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Login from "../views/Login";
import Register from "../views/Register";
import ResetPw from "../views/ResetPw";
import firebase from "firebase/app";

Vue.use(VueRouter);

const routes = [
    {
        path: "/",
        name: "home",
        component: Home,
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/login",
        name: "login",
        component: Login,
    },
    {
        path: "/register",
        name: "register",
        component: Register,
    },
    {
        path: "/resetpw",
        name: "resetpw",
        component: ResetPw,
    },
    {
        path: "/member",
        name: "memberlist",
        // component: Memberlist,
        component: () => import('../views/MemberList.vue'),
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/removed",
        name: "removedlog",
        // component: RemovedLog,
        component: () => import('../views/RemovedLog.vue'),
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/log",
        name: "pointlog",
        // component: PointLog,
        component: () => import('../views/PointLog.vue'),
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/:name",
        name: "member",
        // component: Member,
        component: () => import('../views/Member.vue'),
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/edit/:name",
        name: "edit",
        // component: EditPlayer,
        component: () => import('../views/EditPlayer.vue'),
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/delete/:name",
        name: "delete",
        // component: DeletePlayer,
        component: () => import('../views/DeletePlayer.vue'),
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/editremoved/:name",
        name: "editremoved",
        // component: EditRemoved,
        component: () => import('../views/EditRemoved.vue'),
        meta: {
            requiresAuth: true
        }
    }
];

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes
});

router.beforeEach((to, from, next) => {
    const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
    const isAuthenticated = firebase.auth().currentUser;
    if (requiresAuth && !isAuthenticated) {
        next("/login");
    } else {
        next();
    }
});

export default router;

Я не уверен, что делаю неправильно или чего мне не хватает, это как официальный * 1011 В документации * -router написано, что нужно реализовать отложенную загрузку https://router.vuejs.org/guide/advanced/lazy-loading.html, а также в скольких руководствах объясняется, как реализовать отложенную загрузку.

Когда я выполняю сборку, она создает только 1. js файл, когда предполагается создать его для каждого маршрута и используя вкладку сети на firefox, при перемещении между маршрутами нет нового маршрута. js файл загружен, у меня есть только приложение. js

...