关于vue组件循环引用在Docker中的异常

最近在项目中使用了循环引用,因为组件B中包含了组件A,但是组件A中又需要显示组件B,如果直接按照一般的写法如出现如下错误:

1
Failed to mount component: template or render function not defined.

参考Vue的官方文档,在组件章节会找到解决的方法

1
2
3
beforeCreate: function () {
this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue')
}

它通过在组件beforeCreate的生命周期中,动态的加载组件解决了这个问题,经过测试也没有问题,在开发和生产环境中一切正常。

但是奇怪的事情就出现在了Docker中,在Docker中并没有如期的正常找到该组件,但是同样也没有发生上面的报错,通过$refs无法找到组件的正确引用。

经过测试,使用异步加载组件可以解决该问题

1
2
3
beforeCreate: function () {
this.$options.components.TreeFolderContents = () => import('./tree-folder-contents.vue')
}

这下才变得一切正常,好吧,在此记录下来增加点经验