press F12 to open browser development window -> network tab to check async loading !
const HelloWorld = vueComponentLoader.get({ id:"hello-world", baseDir:'./components/HelloWorld/', style:'./components/HelloWorld/index.less', async:false, }); vueComponentLoader.getAll([{ id:"demo", baseDir:'./components/demo/', style:'./components/demo/index.less', }]).then(function(resp) { let opt = { router, data() { return { showComp:false, loading:false, compId:'hello-world' } }, methods: { }, components:{ 'hello-world': HelloWorld, ...resp, }, } window.app = new Vue(opt).$mount("#app") })
const routes = [{ path:'/router-home', name:'home', component: vueComponentLoader.get({ id:"/router-home", baseDir:'./components/home/', style:'./components/home/index.less', }) },{ path:'/router-demo', name:'router-demo', component: vueComponentLoader.get({ id:"router-demo", baseDir:'./components/router-demo/', style:'./components/router-demo/index.less', }) }]; const router = new VueRouter( { routes } ); new Vue({ router }).$mount("#app")