在elixir webpack之后的chrome控制台中未定义的变量

Question

我有一个js文件scripts.js与vue js代码:

var app2  = new Vue({
    el: '#app-2',
    data:{
        message: 'Some msg'
    }
})

然后我用gulp elixir webpack构建js文件

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js')
});

然后我在html中加载public/js/app.js文件，一切正常。但是如果我尝试记录这个变量，我得到一个未定义的错误。

console.log(app2); //undefined

如果我将scripts.js加载到没有webpack的html中，就可以了。

那么我如何在webpack构建后记录这个变量?由于

Answer 1

可能这个变量被最小化和沙箱化了，在全局作用域中不可用。如果您希望在最小化之后访问该变量，则必须以某种方式将其绑定到全局作用域。

例如:

var app2  = new Vue({
    el: '#app-2',
    data:{
        message: 'Some msg'
    }
});
window["app2"] = app2;
//window.app2 = app2;  <- it should also work

这样app2将始终在浏览器的全局上下文中可用。