console.log(0, import('../Pages/IndexPage'))
const withLoadable = (path) => {
console.log(1, import(path))
return Loadable({
loader: () => {
return import(path)
},
loading: Loading
})
}
withLoadable('../Pages/IndexPage')
第一种方法可以拿到组件 第二种则不行
是为什么?
###你是用webpack或其他打包工具开发的吧,如果纯粹使用es6进行开发应该是没有问题的。
webpack在开发阶段也会进行打包,而他内部自己实现了一套import。webpack在打包的时候会找到import进行依赖收集,你的代码中import(path)
path是一个变量,并不指向具体的哪个路径,所以打包的时候找不到你下面传入的路径,你看给出的错误提示也应该能看出来:cannot find module xxx at xxx
,这个main.chunk.js就是打包后的主文件。
详细的可以网上查下资料,webpack import() 动态加载模块踩坑 , 在vue中import()语法为什么不能传入变量?
###错误信息已经提示你了,找不到 ../Pages/IndexPage
这个模块。
其实主要就是webpack打包原理,你可以这样理解:
在遇到import
的时候,会直接引入把这个模块打包进chunk
,所以你第一个可以找到文件,
但是第二个你是一个函数,接受一个path
去引入,webpack在打包的时候是不知道的,最后在你执行的时候去找你传入的路径上的模块,打包完了你执行的时候是在 /static/js
下的所以是找不到这个 ../Pages/IndexPage
这个模块的。