Vue实例全局变量未定义问题求助

这事儿我之前也碰到过，原因其实很直白：Laravel Mix依托Webpack打包代码时，默认会把你的JS文件当作ES模块处理，模块里定义的const vm只在模块内部作用域有效，不会自动暴露到全局的window对象上。而浏览器控制台和页面内的其他脚本都是在全局作用域执行的，自然找不到这个变量。

不过Vue DevTools能正常识别实例，是因为它直接和Vue的内部实例注册机制交互，不需要依赖全局变量~

解决办法 #

方法1：手动把实例挂载到全局window对象 #

这是最直接的调试方案，在你的app.js里加一行代码就行：

const vm = new Vue({ 
  el: '#app', 
  data: { page: 'welcome' } 
});
window.vm = vm; // 将实例暴露到全局作用域

刷新页面后，再去控制台输入vm就能正常访问实例了。

方法2：用Vue DevTools直接调试（推荐） #

如果只是想调试实例，其实没必要非要在控制台用全局变量。Vue DevTools已经提供了更便捷的调试方式：你可以在DevTools的「Components」面板选中根组件，然后在控制台输入$vm（部分版本可能是$0.vm），就能直接访问当前选中的实例，完全不需要修改代码。

方法3：避免全局污染的进阶方案 #

如果不想把变量暴露到全局，还可以通过Vue的全局属性或者自定义事件总线来传递实例引用，但这更适合业务代码里的交互场景，单纯调试的话前两种方法会更高效。

内容的提问来源于stack exchange，提问作者Marshall Davis