天天看點

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插件已經運作,但是調試視窗沒有出現的原因