在网上搜集了各种信息,试了各种方法,打开F12时候,还是没有找到vuedevtools这个插件的选项
例如:
1、打开允许访问文件网址
2、代码入口文件添加以下代码
Vue.config.devtools = true;
3、修改mainifest.json 中的persistant为true等等方法
尝试过以上方法均不能显示!
打开F12后还是不能显示
个人理解:是不是浏览器不能将该文件识别成使用vue元素的项目?从这个文件的url来看,相当于用浏览器直接打开了该文件
从这一个角度出发,猜测如果该文件能够和通过npm create vue@2 一样创建的项目部署在npm的服务器上,是不是就能识别出该文件使用了vue元素?
直接实践:
这里下载一个模拟服务器Live Server
配置好LiveServer服务器参数点击此处https://blog.csdn.net/qq_74629570/article/details/142446617?spm=1001.2014.3001.5502
右键你需要调试的项目文件,点击Open With Live Server
项目打开后可以看到,该文件运行在了本地服务器上,打开F12,发现多了一个Vue的选项!
紧接着,点击该选项,发现VueDevtools调试工具完美显示!
总结:前面的假设成立。运行vue.js项目文件时,需要将其部署在本地服务器上。VueDevtools才是识别出该文件使用了vue元素,从而该插件才能显示。