Chrome浏览器及electron-vue项目添加vue-devtools插件的方法步骤
Step 1:Chrome浏览器添加vue-devtools插件Step 2:electron-vue项目添加vue-devtools插件
·
Step 1:Chrome浏览器添加vue-devtools插件
① 下载vue-devtools源码压缩包:https://github.com/vuejs/vue-devtools
② 浏览器地址栏输入chrome:version
转到关于版本,查看“个人资料路径”(浏览器配置文件的存放位置),将zip中的vue-devtools-dev文件夹解压到该路径下
③ Git Bash进入vue-devtools-dev工程目录,安装依赖:
$ npm install
安装完成后编译程序:
$ npm run build
编译成功后,在目录\vue-devtools-dev\shells\chrome\下找到manifest.json文件,将"persistent": false
改为"persistent": true
④ 浏览器地址栏输入chrome://extensions
转到扩展程序,启用“开发者模式”,点击“加载已解压的扩展程序”按钮,选择目录\vue-devtools-dev\shells\下的chrome文件夹,插件添加成功!
Step 2:electron-vue项目添加vue-devtools插件
① 在项目目录\ev-demo\src\main\下找到index.dev.js文件,添加2行代码:
const { BrowserWindow } = require('electron')
BrowserWindow.addDevToolsExtension('C:/Users/89693/AppData/Local/Google/Chrome/User Data/Default/vue-devtools-dev/shells/chrome')
// chrome文件夹所在的完整路径地址
② 运行项目,控制台出现Vue标签,即可使用vue-devtools啦!
以上。
更多推荐
已为社区贡献5条内容
所有评论(0)