Kummy's Blog

o(︶︿︶)o { name : 'Kummy' , job : 'Feser' }

如何全局自动化注册异步组件?

vue 文档关于:组件的全局自动化注册:

https://cn.vuejs.org/v2/guide/components-registration.html#%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6%E7%9A%84%E8%87%AA%E5%8A%A8%E5%8C%96%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C

 

优化一下,如果我们想把组件做成全局的异步组件,应该如何做了:

实际上新版本的 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 按需方式都不会生效
    })
}

 

posted @ 2019-03-08 15:31  李 维  阅读(477)  评论(0编辑  收藏  举报