Question

这里我定义了一组库

lib1.js

export default {
    Func1() {
        return ...
    }
}

（其他库也是如此）

在这里，我将这些库导入到主文件中，稍后再导入到我的Vue中：

api.js（不是lib1，lib2，lib3和api在同一文件夹中）

import './lib1';
import './lib2';
import './lib3';

正在显示：

<script>
    import * as Api from '@/api/api';

    mounted() {
      Api.func1();
    }

</script>

Mix给我一个错误，指出找不到函数：

"export 'Func1' (imported as 'Api') was not found in '@/api/api' ....

我知道路径是正确的，因为例如，如果我直接在我的视图中导入库，那么它将起作用：

（vue）：



<script>
    import Lib1 from '@/api/lib1'
    import Lib2 from '@/api/lib2'
    import Lib3 from '@/api/lib3'

    mounted() {
      Lib1.func1();

      ...

    }

</script>

这里有什么？我只希望“主”文件导入我的所有Api函数，而不是分别导入每个函数。

关于环境的其他说明：我正在使用Laraval 6和Vue。

Answer 1

有很多组合模块的方法，我创建了stackblitz来向您展示如何完成这些模块。
您的方法行不通，因为您导出了default，而当您尝试import './lib1';命名此类模块时，它只是未知的。
此外，import * as Api仅在您有多个named导出但没有一个default导出时才有效。
如我所见，您要将多个库合并到一个导出的对象。有几种方法可以实现您的目标：

仅导出命名函数（我的最爱）：

lib1

export function Func1() {
  return ...;
}
export function Func2() {
  return ...;
}

然后在主文件中：

import * as lib1 from './lib1';

export default {
...lib1
}

按照您的示例导出默认值

lib1

export default {
 Func1() {},
 Func2() {}
}

然后在主文件中：

import lib1 from './lib1';

export default {
...lib1
}

导出默认但已合并

lib1

export default {
 Func1() {},
 Func2() {}
}

然后在主文件中：

import lib1 from './lib1';

export default {
 lib1
}

，但是在其他文件中，您应该像这样使用它：

import Api from '@api/api';

Api.lib1.Func1()

注意：在当前配置下，您应该使用import Api from '@api/api';，而不使用* 此外，与named相比，default的进口还算不错的article。

Answer 2

index.js是我的主意。将所有库导入到同一目录中的index.js中，然后从该文件中全部导出。然后，您可以将它们全部导入一个内衬中。

index.js

import lib1 from './lib1';
import lib2 from './lib2';
import lib3 from './lib3';

export {
  lib1,
  lib2,
  lib3,
};

vue

import { lib1, lib2, lib3 } from '@/[directory with index.js]';

或者我认为以下内容也可以使用，并且会像这样使用：

import libs from '@/[directory with index.js]';

libs.lib1.someFunction();

导入和导出JS库

2 个答案: