Question

我正在尝试解决this code的问题：

    import globalComponents from './global-components';
    // ...
    globalComponents.forEach((component) => {
      // eslint-disable-next-line no-underscore-dangle
      Vue.component(component.__file.split('/').pop().split('.')[0], component);
    });

globalComponents是一个包含index.js的目录，该目录导入和重新导出两个Vue.js组件文件。我不知道您可以做到这一点，但我想这是一种执行类似python模块层次结构的方法。

无论如何，此代码在调试模式下可以正常工作，但是在为发布而构建时，应用程序无法加载，因为组件对象没有__file属性。这段代码在做什么，我如何使其在生产版本中工作？

Answer 1

由于您使用的是webpack，因此使用require.context()可能会更容易，这将为您节省一些麻烦。

const files = require.context('./global-components', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

通过这种方式，您不需要维护index.js文件，只需为此目的导入和导出所有组件。只需在该目录中创建SFC即可。

缩小后模块文件名发生了什么

1 个答案: