各位好 小弟初碰Vue.js
目前在嘗試製作一個小專案
碰到一些問題
目前的工具

1. Webpack 5
2. Vue.js 2.6

想從基本開始做起
所以並沒有使用Vue-cli, Vuex, Vue-router

回到正題:
目前的專案是類似一個dashboard
小弟希望header, sidebar...都固定
而page-content是dynamic impact的
也就是使用

<component :is="nowPage"></component>

的方式
所以理應會有一個頁面需要大量import那些頁面檔
像是

//dashboard-wrapper.vue
import DashboardFooter from './dashboard-footer'
import PageHeader from './page-header'
import myPage1 from './myPage1'
import myPage2 from './myPage2'
import myPage3 from './myPage3'
import myPage4 from './myPage4'

小弟想把這些頁面檔拆成一個js檔統一管理

//page.js
export default {
    myPage1: '@/components/pages/myPage1.vue',
    myPage2: '@/components/pages/myPage2.vue',
    myPage3: '@/components/pages/myPage3.vue',
    myPage4: '@/components/pages/myPage4.vue'
}

可是當我要在Components引入時遇到問題

正常的lazyloading是可以跑的

//dashboard-wrapper.vue
import DashboardFooter from './dashboard-footer'
import PageHeader from './page-header'
import myPage1 from './myPage1'
import myPage2 from './myPage2'
import myPage3 from './myPage3'
import myPage4 from './myPage4'

export default {
  name: 'DashboardWrapper',
  components: {
    DashboardFooter,
    PageHeader,
    myPage1: () => ({
      component: import('@/components/pages/myPage1.vue'),
      delay: 300,
    }),
     myPage2: () => ({
      component: import('@/components/pages/myPage2.vue'),
      delay: 300,
    }),
     myPage3: () => ({
      component: import('@/components/pages/myPage3.vue'),
      delay: 300,
    }),
     myPage4: () => ({
      component: import('@/components/pages/myPage4.vue'),
      delay: 300,
    }),
  },
}

但因為我想把他縮減成動態的方式
我嘗試用Object.keys的方式組成lazyloading語法

//dashboard-wrapper.vue
import DashboardFooter from './dashboard-footer'
import PageHeader from './page-header'
import myComponents from './pages'

const DynamicComponent = Object.keys(myComponents).reduce((obj, name) => {
    return Object.assign(obj, { [name]: () => import(myComponents[name]) })
  }, {})

export default {
  name: 'DashboardWrapper',
  components: {
    DashboardFooter,
    PageHeader,
    DynamicComponent
  },
}

但卻碰到了Error
Components裡面也不給放Object.keys等方法
所以想詢問大大是否有辦法可以大量動態lazyloading
或是我這想法有些缺失是我沒發現的
願各位大大指點迷津

根據@DanSnow大大

function lazyloading(page) {
  return import(`@/components/pages/${page}.vue`)
}
export default {
  components: {
    DashboardFooter,
    PageHeader,
    myPage1: () => ({
      component: lazyloading('myPage1'),
      delay: 300,
    }),
    myPage2: () => ({
      component: lazyloading('myPage2'),
      delay: 300,
    }),
     myPage3: () => ({
      component: lazyloading('myPage3'),
      delay: 300,
    }),
     myPage4: () => ({
      component: lazyloading('myPage4'),
      delay: 300,
    }),
  },
}

找到一個接近我需求的連結
可是他是用全域註冊
https://www.itread01.com/content/1559131505.html