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

Question

Simple data example, constants.js

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

Import it on the Vue component, which renders correctly. But if I use the DevTools and type c in the console... c is undefined.

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;
    },
  },
};

I don't understand why?

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

https://ud0d3e.csb.app/

Answer 1

Modules are not exposed to the global scope ( window ) when transpiled.

If you really want to expose c in DevTools you'd have to do window.c = c ; Be careful when referencing window as this will break when rendering server side or prerendering as window does not exist.