vue和webpack如何按需加载.vue

Question

vue官方说的异步组件方式

Vue.component('async-webpack-example', function (resolve) {
  require(['./my-async-component'], resolve)
})

我按这个做法webpack打包的时候不会报错
但是页面上会提示错误
Uncaught TypeError: Cannot read property 'call' of undefined
我的代码

Vue.component('my-component', function (resolve, reject) {
    require(['./components/cp-cropper/cp-cropper2.vue'], resolve()
    )
})

不懂怎么回事..
顺便我还想问个问题，使用局部注册组件的时候：

 components: {
        'my-component': require('./components/cp-cropper/cp-cropper.vue')
    },

页面上我用了一个DIV来放置这个cp-cropper.vue的组件，并且开始我用v-if将其不显示
按官方对v-if的说法只有第一次显示才会编译、渲染。
那是不是意味着页面刚加载的时候，我上面的cp-cropper.vue以及这个vue里面引用的js并没有加载进来
只有我每一次点击的时候才会加载，之后我再隐藏、再显示，都不会重复加载
那是不是这样就已经算是需加载了？？？

关于这个问题我自己有做个简单的测试，在cp-cropper.vue随便console个东西，确实只有第一次点击的才会console，但是怕自己有误解，我想确认一下

Answer 1

首先按需加载就是这样实现的呀
export function  configRouter(router) {
    router.map({
        'test':{
            component:(resolve) =>{
                require(['../components/test.vue'],resolve)
            }
        }
        })

然后你说的
只有我每一次点击的时候才会加载，之后我再隐藏、再显示，都不会重复加载这种不算是按需加载，这是动态隐藏和显示的问题，因为一开始就把这些给渲染了

Answer 2

你解决了吗，我也碰到这个问题了