vue-devtools安装后，chrome控制台并没有出现vue扩展工具
问题
在使用 vue-cli3.0 开发的时候， 突然发现vue-devtools 扩展工具不能使用， 虽然开发中可以不使用该工具，但是使用该工具确实可以提高开发效率
Vue.js is detected on this page.
Devtools inspection is not available because it’s in production mode or explicitly disabled by the author.
原因
项目打包的时候 把 Vue 代码 分离出来了，通过外部引用的方式 进行打包， 引入<script src="https://libs.cdnjs.net/vue/2.6.10/vue.min.js"></script>
可能是引入生产环境的vue.min.js 中 vue.config.devutools 为 false 了
注意事项
- 修改 vue.config.js 文件的时候 一定要 重新
npm run dev - 配置完后， 浏览器页面 reload 后， 一定要重新打开控制台
如果右上角 vue-devtools 显示为 Vue.js is detected on this page.Open DevTools and look for the Vue panel. 可以 空气浏览器的控制台看看
解决方案
方案1： 在 main.js 中添加 Vue.config.devtools=true
仅需要在 main.js 中添加 Vue.config.devtools=true 即可
方案 2： 开发环境和生产环境 externals 中 删除或者添加vue
-
externals 中 开发环境 去除 ‘vue’ 相关值 ， 生产环境 添加 ‘vue’ 值
externals: {
// ‘vue’: ‘Vue’,
// ‘vue-router’: ‘VueRouter’,
// ‘axios’: ‘axios’,
// ‘element-ui’: ‘ELEMENT’,
‘echarts’: ‘echarts’
}
main.js 中 注释 // Vue.config.devtools = true;