使用 webpack 的 Vue，如何在浏览器调试器中找到应用数据?

Question

(迈出Web开发的第一步，但似乎我目前甚至无法使用最基本的工具，例如浏览器调试器。

当我初始化一个新的 vue.js 2.x 项目时，如下所示...

sudo npm install --global vue-cli
vue init simple vue1

(接受所有提示的默认值)

。然后继续打开生成的索引.html在 Chromium 中，我或多或少地看到了我在浏览器调试器中的期望。更具体地说，我可以在浏览器控制台中输入以下内容...

this.app.$data.greeting = "Blah"

。并立即看到页面问候语更改，正如我所期望的那样。

但是，当我使用网络包模板时...

vue init webpack-simple vue2
cd vue2
npm install
npm run dev

。我无法在浏览器控制台中找到数据。从 App.vue 中的代码中，我希望某处应该有一个msg或data属性，但是当我尝试寻找它时，我很快就会迷路。我确实在服务的版本中找到了.msg.js但是代码非常模糊，以至于我无法确定它的完整路径。如果我投入更多的时间，我可能会找到它，但不知何故，我觉得它不会那么复杂，我一定错过了一些东西。

那么，如何有条不紊地找到它呢？

Answer 1

使用 Vue DevTools 是你最好的选择。当你通过 webpack 运行 Vue 时，this将是window对象，而不是 Vue 实例。

(从技术上讲，你也可以做window.Vue = new Vue({ })或var foobar = new Vue({}); window.Vue = foobar，然后在window.Vue.$data.greeting或其他任何东西上访问 Vue 属性，但 devtools 是为此功能而设计的，对你来说会容易得多)

Answer 2

"简单"的 vue 模板将 vue 实例保存在一个可以在任何地方访问的全局appvar 中：

<script>
var app = new Vue({
el: '#app',
...
})
</script>

使用"webpack-simple"模板，vue-loader加载器将组件包装在 CommonJS 模块中(这些模块是闭包，因此可以防止变量在模块外部直接访问)。

要修复此问题以进行调试，您可以使用 Vue devtools。

最终，您还可以使应用变量在开发环境中可访问。 在 webpack.config 中定义一个DEV变量.js(将其删除用于生产)：

plugins: [
new webpack.DefinePlugin({
DEV: true
})
]

并在代码中公开您想要的内容：

if (typeof DEV !== 'undefined' && DEV) {
window.app = app; //this block will be removed by the build step
}