无法从 vuejs 中的命名导入访问变量答案

【问题标题】：Cannot access variable from named imports in vuejs无法从 vuejs 中的命名导入访问变量
【发布时间】：2019-05-14 22:06:45
【问题描述】：

我有一个 vue 组件库。

组件/index.js

import Graphs from './graphs/index.js'
import Tabs from './Tab'
export default { Graphs, Tab }

然后在 index.js 上

import lib from 'components/index.js'
export default lib

然后我在我的 vue 应用上安装我的 lib

在我的 vue 应用中，我有以下内容：

import {Graphs} from lib
console.log(Graphs) >> undefined

但是，使用默认导入并访问它可以工作的变量：

import lib from lib
console.log(lib.Graphs) >> Object { props: {…}, computed: {…}, data: data(), methods: {…}, render: render(), staticRenderFns: [], _scopeId: "data-v-41c28542", beforeCreate: (1) […] }

我感觉这与 webpack 或 babel 模块有关，或者可能是我缺少但无法弄清楚它是什么。

【问题讨论】：

标签： vue.js webpack vuejs2 vue-component babeljs

【解决方案1】：

在你的索引文件中你会得到结果

// import lib from "components/index.js";
//  given result lib.Graphs, lib.Tabs
//  then you exporting object like { lib: { Graphs: '....', Tabs: '...' } }
export default { lib };

因为有这个结果。在这种情况下 index.js 操作是不必要的

【讨论】：

这不是必需的，因为我以后会从更多文件中添加代码。当我重写 SO 问题的代码时，我犯了在导出默认值中添加额外大括号的错误。我已经编辑过了。谢谢。

【解决方案2】：

似乎使用导入的对象不允许以后进行命名导入。

因此，即使 lib 是一个带有 Graphs 键的对象，它在像这样导入它之后也不起作用。

所以我要做的就是将它们再次导出为命名导出。

所以 index.js 变成了：

import lib from './components/index'
export let Graphs = lib.Graphs
export default lib

【讨论】：