使用 Browserify 时使我的 Vue 实例全局化，以便开发人员工具可用答案

【问题标题】：Making my Vue instance global when using Browserify so the developer tools are available使用 Browserify 时使我的 Vue 实例全局化，以便开发人员工具可用
【发布时间】：2016-01-23 19:12:20
【问题描述】：

我开始学习一些新的前端工具，特别是 Vue.js、Gulp、Node、Babel 和 Browserify。

我已经完成了所有工作，但是我遇到了一个问题，即我为我的应用程序创建的 Vue 实例不是全局的，因此（我假设）我无法访问我的浏览器的 Vue开发工具。

在我的 gulpfile 中，我有一个捆绑 javascript 应用程序的任务：

gulp.task('build-js', function (){
    return browserify('src/javascript/app.js')
        .transform(babelify, { presets: ['es2015'] })
        .bundle()
        .on('error', function (e){
            console.log(e.message);
            this.emit('end');
        })
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('public/javascript'));
});

在我的 app.js 文件中，我像这样实例化我的 Vue 实例：

var Vue = require('vue');

Vue({
    el: '#app',
    data:{
        message: 'Worked!!!'
    }
});

作为测试，index.html 中的相关 html 如下所示：

<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <input v-model='message'></input>
    </div>
    <script type="text/javascript" src="javascript/bundle.js"></script>
</body>

代码有效；我可以在绑定的输入对象中输入内容并在标题中看到结果，但我无法访问 Vue 开发工具：

并且扩展程序肯定已安装并启用：

我一直在寻找解决方案，并看到人们说将 Vue 分配给 window 或 global 对象的帖子，但这绑定了 Vue 库，而不是我的特定实例。

有没有办法让我的 Vue 实例全球化？我是否误解了这应该如何工作？

【问题讨论】：

全局 vue 在我的 Vue 应用程序中未定义，但工具加载正常。其他事情正在发生。
前几天我遇到了问题。我重新安装了开发工具，这似乎解决了它。我确信 Vue 不需要是全局的才能显示开发工具。
感谢@BillCriswell 和 ceejayoz。是的，即使在全球范围内，开发工具也没有显示出来。它一定是别的东西。比尔，你是通过 CDN 还是从本地 js 文件访问 vue？我的是通过 CDN，我想知道这是否导致了问题。
我通过 Browserify 使用它。您使用的是缩小版还是来自 CDN 的？请务必在此处查看注释：github.com/vuejs/vue-devtools#notes
啊，我的错。我也通过节点使用它（当我写之前的评论时，我正在查看一个不同的演示项目）。我通过require('vue'); 将它拉进来，看起来它没有被缩小。奇怪的是，开发工具现在正在显示。除了标签刷新，我什么也没做。我猜这些工具仍然很挑剔。

标签： javascript google-chrome gulp browserify vue.js

【解决方案1】：

如果将创建的 vue 实例分配给 window 对象，它应该可以工作：

var vm = new Vue({
    el: '#app',
    data:{
        message: 'Worked!!!'
    }
});

window.vue = vm

至于 vue devtools，我不确定它们是如何为特定 vue 实例激活的，到目前为止，我已经将它们与 vue 路由器一起使用，并且它们开箱即用。

【讨论】：

谢谢。这绝对使 vue 实例可用。开发工具仍未显示，但我认为这是因为另一个问题。不管怎样，这确实使实例可以访问，所以我会检查！

【解决方案2】：

请务必遵循documentation 中的这些说明：

vue-devtools 仅适用于 Vue.js 1.0.0+。
对于 Vue 版本 = 1.0.16 在所有情况下都适用于开发工具。
要使其适用于通过 file:// 协议打开的页面，您需要在 Chrome 的扩展管理面板中选中此扩展的“允许访问文件 URL”。

【讨论】：