Vue DevTools `Devtools inspection is not available` 使用问题

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 标签。
如果没有显示这个标签，关闭调试窗口再打开即可。