как настроить лениво загруженные маршруты, используя require.context в Vue. js - PullRequest
Новая
       13

как настроить лениво загруженные маршруты, используя require.context в Vue. js

1 голос
/ 02 марта 2020

Как мы можем настроить лениво загруженные маршруты, используя require.context в Vue. js, как показано ниже: 

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const app = require.context('../views/app', false, /\.vue$/).keys()
const pub = require.context('../views/public', false, /\.vue$/).keys()
const wip = require.context('../wip', false, /\.vue$/).keys()

const routes = []

app.forEach(k => {
  const key = k.replace(/(\.\/|\.vue)/g, '')
  const o = {
    path: `/${key}`,
    name: `${key}`,
    meta: { layout: 'app-shell' },
    component: () => import(/* webpackChunkName: "`${key}`" */ `../views/app/${key}.vue`)
  }
  routes.push(o)
})

pub.forEach(k => {
  const key = k.replace(/(\.\/|\.vue)/g, '')
  const o = {
    path: `/${key}`,
    name: `${key}`,
    component: () => import(/* webpackChunkName: "`${key}`" */ `../views/public/${key}.vue`)
  }
  routes.push(o)
})

wip.forEach(k => {
  const key = k.replace(/(\.\/|\.vue)/g, '')
  const o = {
    path: `/${key}`,
    name: `${key}`,
    component: () => import(/* webpackChunkName: "`${key}`" */ `../wip/${key}.vue`)
  }
  routes.push(o)
})

console.log(routes)

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

export default router

Маршруты выглядят нормально в консоли: 

(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {path: "/catalogue", name: "catalogue", meta: {…}, component: ƒ}
1: {path: "/companies", name: "companies", meta: {…}, component: ƒ}
2: {path: "/dashboard", name: "dashboard", meta: {…}, component: ƒ}
3: {path: "/inventory", name: "inventory", meta: {…}, component: ƒ}
4: {path: "/media", name: "media", meta: {…}, component: ƒ}
5: {path: "/outlets", name: "outlets", meta: {…}, component: ƒ}
6: {path: "/profile", name: "profile", meta: {…}, component: ƒ}
7: {path: "/readings", name: "readings", meta: {…}, component: ƒ}
8: {path: "/reports", name: "reports", meta: {…}, component: ƒ}
9: {path: "/sales", name: "sales", meta: {…}, component: ƒ}
10: {path: "/users", name: "users", meta: {…}, component: ƒ}
11: {path: "/about", name: "about", component: ƒ}
12: {path: "/forgot", name: "forgot", component: ƒ}
13: {path: "/home", name: "home", component: ƒ}
14: {path: "/login", name: "login", component: ƒ}
15: {path: "/demo1", name: "demo1", component: ƒ}
16: {path: "/demo2", name: "demo2", component: ƒ}
17: {path: "/demo3", name: "demo3", component: ƒ}
18: {path: "/demo4", name: "demo4", component: ƒ}
19: {path: "/test", name: "test", component: ƒ}

Приложение запускается нормально, но компоненты / содержимое страницы не загружаются.

1 Ответ

0 голосов
/ 22 марта 2020

вы можете решить ваши проблемы с помощью этой опции в вашем коде: 

const app = require.context('../views/app', false, /\.vue$/,'lazy').keys()

документация

опция webpack

...