请问一下讲师怎么解决vue项目export default 后import问题

Question

export default  {   foo:123,bar:456}

import { foo } from "a.js"

这个时候导入的是undefined，请问具体怎么解决啊

Answer 1

张轩 2022-05-12 10:16:06

同学你好

你对于 es6 的 export import 理解有点问题

你这里应该是写成这样

// 因为a.js 重视默认导出，也就是使用了 default
import a from './a'
// 访问上面的属性
a.foo
a.bar
你使用具名导入是针对另外一个文件不使用 export 的变量的，
比如 a.js 这么写
export const foo = '123'
export const bar = '234'
//这个时候
import { foo, bar } from './a'
就可以有 foo 和 bar 的值了

具体原因可以看一下文档：https://developer.mozilla.org/zh-CN/docs/web/javascript/reference/statements/export

• 提问者 慕丝7210068 #1

  我知道你的意思，但是现在就是说模块导出部分不能懂，希望实现这种解构默认导出

• 张轩 回复 提问者 慕丝7210068 #2

  没听懂你的意思，你是要修复你的那段代码嘛？
  那就是
  import foo from './a.js' //注意不加括号
  console.log(foo.foo)
  console.log(foo.bar)

• 提问者 慕丝7210068 回复 张轩 #3

  应该是https://www.npmjs.com/package/babel-plugin-add-module-exports 想使用这个插件。实现export default 也能直接解构import.
  参考：https://www.jianshu.com/p/ba6f582d5249
  
  请问是吗？

点开查看后面1条评论