我正在尝试在我的路线上实现一些延迟加载但没有成功。这就是我的路由器文件夹中的 index.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;

我不确定自己做错了什么或遗漏了什么，这就是官方 vue-router 文档所说的实现延迟加载的方式 https://router.vuejs.org/guide/advanced/lazy-loading.html以及有多少教程解释了如何实现延迟加载。

当我进行构建时，它只创建了 1 个 .js 文件，当它应该为每个路由构建一个并使用 firefox 上的网络选项卡时，在路由之间移动时没有新的路由 .js 文件被加载，我只有一个 app.js

最佳答案

可能是您忘记了 webpackChunkName 注释。为此，您需要通过使用特殊注释语法提供 block 名称来使用命名 block 。这是一个例子:

{
   path: '/dashboard',
   name: 'dashboard',
   component: () =>
      import(
         /* webpackChunkName: "Dashboard" */ './components/Dashboard.vue'
      ),
   meta: {
      title: 'Dashboard'
   }
},

https://stackoverflow.com/questions/61086044/