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

Question

我开始学习一堆 new-to-me 前端工具，特别是 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!!!'
    }
});

作为测试，相关 html 在 index.html 中看起来像这样：

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

代码有效；我可以输入我的绑定输入 object 并在标题中看到镜像的结果，但我无权访问 Vue devtools:

并且肯定安装并启用了扩展：

我一直在四处寻找解决方案，看到有人说要将 Vue 分配给 window 或 global objects，但这绑定了 Vue 库，不是我的特定实例。

有没有办法让我的 Vue 实例成为全局实例？我是不是误解了它应该如何工作？

Answer 1

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

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

window.vue = vm

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

Answer 2

确保遵循 documentation 中的这些注释：

vue-devtools 仅适用于 Vue.js 1.0.0+.
对于 Vue 版本 < 1.0.16，devtool 将仅适用于 Vue 的开发（非缩小）版本，因为 devtools 挂钩在生产构建中被剥离。这还包括由 Webpack 和 Browserify 在生产模式下生成的构建。 Vue >= 1.0.16 在所有情况下都可以使用开发工具。
要使其适用于通过 file:// 协议打开的页面，您需要在 Chrome 的扩展程序管理面板中检查 "Allow access to file URLs" 此扩展程序。

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

Making my Vue instance global when using Browserify so the developer tools are available

javascript

google-chrome

gulp

browserify

vue.js