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​

​​ 标签。

如果没有显示这个标签，关闭调试窗口再打开即可。