天天看点

Vue.js devtool插件已经运行,但是调试窗口没有出现的原因

Vue.js devtool插件已经运行,但是调试窗口没有出现的原因

我们可以看到插件运行了,但是在调试器中没有显示

Vue.js devtool插件已经运行,但是调试窗口没有出现的原因

首先我们进入插件安装目录,找到manifest.json文件,修改参数:"persistent": false成"persistent": true

Vue.js devtool插件已经运行,但是调试窗口没有出现的原因

然后刷新页面,可以看到运行成功,当然,有注意点:

1、首先是要修改"persistent": true,在vue项目启动时激活插件。

2、修改之后,在vue项目中不要引用压缩版的vue.js,要用开发版的vue.js

3、但是,如果非要用压缩版的vue.js,就必须在js中加入一段语法:

Vue.config.devtools = true;

这句话的意思是开启devtools,因为压缩版的vue.js的Vue.config.devtools是默认关闭,而开发版的Vue.config.devtools是默认打开的。

<script>
    Vue.config.devtools = true;
    //这是MVVM中的View Model
    let vm = new  Vue({
       el:'#app',
        //这是MVVM中的Model
        data:{
           message:'hello world',
        }
    });
</script>
           

成功在调试器开启vue

Vue.js devtool插件已经运行,但是调试窗口没有出现的原因