为什么我不能导入 * 这些 Javascript 文件？

Question

我正在尝试将这些文件导入到 perimeters 文件夹中

1. basePerimeter.js
2. byePerimeter.js
3. secretPerimeter.js

我的导入代码：

import * as perimeters from '../perimeters'

basePerimeter.js

import { Perimeter } from 'vue-kindergarten';

export default class BasePerimeter extends Perimeter {
  isAdmin() {
    return this.child && this.child.role === 'admin';
  }
}

byePerimeter.js

import basePerimeter from './basePerimeter';

export default new basePerimeter({
  purpose: 'bye',
  govern: {    
    'can route': () => true,
    'can viewParagraph': function () {
      return this.isAdmin();
    },
  },
});

secretPerimeter.js

import basePerimeter from './basePerimeter';

export default new basePerimeter({
  purpose: 'secret',
  govern: {
    'can route': function () {
      return this.isAdmin();
    },
  },
});

但如果我单独导入它，它可以工作。

像这样：

import basePerimeter from '../perimeters/basePerimeter'

由于这段代码，我需要通过 * 导入：

router.beforeEach((to, from, next) => {
  const perimeter = perimeters[`${to.name}Perimeter`];
  if (perimeter) {
    const sandbox = createSandbox(child(store), {
      perimeters: [
        perimeter,
      ],
    });
    if (!sandbox.isAllowed('route')) {
      return next('/');
    }
  }
  return next();
});

为什么会抛出这个错误：

ERROR in ./src/router/index.js
Module not found: Error: Can't resolve '../perimeters' in 'E:\my\vue\instance\src\router'
 @ ./src/router/index.js 13:0-44
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

Answer 1

我不知道这里发生了什么，但是添加一个 index.js 文件并导入我需要的文件解决了我的问题。

index.js

import byePerimeter from './byePerimeter'
import secretPerimeter from './secretPerimeter'

export {
    byePerimeter,
    secretPerimeter
}