Vue DevTools ​​Devtools inspection is not available​​ 使用問題

在谷歌浏覽器中添加 ​

​Vue Devtools​

​ 之後，點選插件時提示這樣的資訊

Vue.js is detected on thispage. Devtools inspection is not available because it’s in production mode or explicily disabled by the author

大概意思就是：插件已經在目前頁探測到了 ​​

​vue.js​

​​ 但可能由于作者禁用了調試功能，或者處于生産模式中，是以不能使用 ​

​Vue DevTools​

​ 插件

這個有兩種情況：

• 使用 html 引入 vue.js 的時候
• 使用 webpack 用 npm 直接引用 vue 子產品的時候

html 引入 vue.js

把引入的檔案改為 ​

​vue.js​

​​ 而不是 ​

​vue.min.js​

​

使用 webpack 的時候，也就是使用 .vue 單檔案的時候

需要在引入 vue 元件的時候，配置一下 vue

如：我的是這樣

main.js

import Vue from 'vue'
import App from './App.vue'

let app = new Vue({
    el: '#app',
    render: h => h(App)
});      

需要在下面修改 Vue 的配置

Vue.config.devtools = true;      

結果

當檢測到頁面中使用了 ​

​vue​

​​ 的時候， ​

​Vue Devtools​

​​ 插件會在調試視窗中新加入一個 ​

​vue​

​​ 标簽。

如果沒有顯示這個标簽，關閉調試視窗再打開即可。