Warning: in_array() expects parameter 2 to be array, null given in /data/wwwroot/blog.catui.co/usr/themes/Plain/header.php on line 93

前言

~~水水更健康~~
某群看见 @wit 发了一个 vue-auto,看简介似乎很强,于是乎看了下代码,就是利用 Webpack 的 require.context 实现引入,所以还是得按照大概的约定目录结构才能玩一下,所以其实还是得根据实际情况改造,但并不能阻止我水下这篇(科普)文章!

什么是 Require.context

Webpack 文档:Dependency Management

大概就是能根据某个路径获取相关的文件路径,就像 nodereaddir?嗯,似乎就这么简单!

看看它如何实现自动引入路由

一般 UI 业务逻辑一般放在在 Pages 里,也就差不多对应相关的 Router 了。
遍历 page 下所有 .vue 文件,

pagesContext = require.context('@/pages/', true, /\.vue$/);

可以看到返回的是一个函数,接受一个 req 参数,也就是你想要动态引入的文件路径,调用它就可以得到该文件;至于如何拿到上下文的路径,则提供了一个 key 返回路径数组。
68C54FF8-341B-4FB9-A717-2B215F3AB9D5.png

{default: {…}, __esModule: true}
const componentContext = require.context('@/components/', true, /\.vue$/);
componentContext.keys().forEach(C => {
  Vue.component(
    C.split('/')
      .slice(-1)[0]
      .replace('.vue', ''),
    componentContext(C).default
  );
});

已有 2 条评论

  1. Karina Sit:


    это интересно...

    2019-05-13 05:21 回复

preView