vue 文档关于:组件的全局自动化注册:
优化一下,如果我们想把组件做成全局的异步组件,应该如何做了:
实际上新版本的 require.context 新增加了一个属性,就可以做异步注册了:
require.context( directory: String, includeSubdirs: Boolean /* optional, default true */, filter: RegExp /* optional, default /^./.*$/, any file */, mode: String /* optional, 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once', default 'sync' */ )
真实代码如下:
// 统一注册全局异步组件(业务组件 和 ui组件) export default (Vue, options) => { // require.context 中 mode 属性,default:async,默认会打包到app.js文件里;可以使用 lazy 设置为 chunk module const context = require.context('@/components/', false, /^p|v|ui+.vue$/, 'lazy'); // 遍历获取组件对象,注册组件 context.keys().map(fileName => { const componentname = fileName.replace("./", "").replace(".vue", "") Vue.component(componentname, () => context(fileName)) //注意: 这里直接使用 ()=> import('path') 和 require 按需方式都不会生效 }) }