在 DevTools 控制台中未定义的 Vue 组件中导入默认值

Question

简单数据示例，constants.js

export default {
  name: "John Smith",
  age: 10
};

在 Vue 组件上导入它，它可以正确呈现。但是，如果我使用 DevTools 并在控制台中键入 c... c 未定义。

import c from "../constants/constants.js";

export default {
  name: "HelloWorld",
  computed: {
    myName() {
      debugger;
      // In DevTools, console... c is undefined
      // even though this clearly works
      return c.name;
    },
  },
};

我不明白为什么？

示例：https://codesandbox.io/s/constantsimportreference-ud0d3e?file=/src/components/HelloWorld.vue:90-341

https://ud0d3e.csb.app/

Answer 1

模块在转译时不会暴露给全局范围 (window)。

如果你真的想在 DevTools 中公开 c，你必须这样做 window.c = c；引用 window 时要小心，因为这会在渲染服务器端或预渲染时中断，因为 window 不存在。

在 DevTools 控制台中未定义的 Vue 组件中导入默认值

Import default in Vue component not definied in DevTools console

javascript

vue.js

es6-modules