- 小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
一. 安装 Vue.js devtools
- 打开chrome浏览器右上角工具栏
- 在
更多工具
选项,选择扩展程序
,进入扩展列表页面 - 在扩展列表页面点击左上角列表图标,在弹出抽屉底部,点击
打开chrome 网上应用店
- 在chrome 网上应用店,搜索
Vue.js devtools
,点击进行安装如果进不去chrome 网上应用店,用VPN科学上网。
- 启用
Vue.js devtools
,并允许访问文件网址
- 安装启用后,执行当前Vue项目,F12打开控制台使用Vue devtools开发者工具
- 如果是本地项目,除了浏览器右上角的vue图标会高亮显示外,控制台已有vue选项提供开发调试
- 如果是线上项目,浏览器右上角的vue图标会高亮显示,但控制台是没有vue选项进行调试
二. 使用Vue.js devtools
过程中可能出现的问题
-
安装devtools后进行项目开发,发现浏览器右上角Vue Logo已点亮,控制台却没有vue选项
- 解决方法:
new Vue({ el: '#app', // …… devtools: 1, // Vue Devtools控制台没有vue选项时手动配置 })
-
点开控制台Vue,选择Component,点击
open-in-editor
文件按钮,自动用编辑器打开对应文件,却无法成功,查看控制台Console
已经输出File src\……\…….vue opened in editor
- 解决方法:
- 安装 launch-editor-middleware:
npm install -D launch-editor-middleware
- vue.config.js 配置 launch-editor-middleware
- vue-cli3( vue.config.js )
const launchEditorMiddleware = require('launch-editor-middleware') // …… devServer: { before (app, server) { // launch editor support. // this works with vue-devtools & @vue/cli-overlay app.use('/__open-in-editor', launchEditorMiddleware(() => console.log( `To specify an editor, specify the EDITOR env variable or ` + `add "editor" field to your Vue project config.\n` ))) } }, // ……
vue-cli3的launchEditorMiddleware可以指定启动编辑器:
app.use('/__open-in-editor', launchEditorMiddleware('code'))
,code
参数对应VSCode编辑器
具体看参考文档open-in-editor- vue-cli2( webpack.dev.conf.js )
- 与vue-cli3同样的launchEditorMiddleware配置
- 但,vue-cli2无法指定启动编辑器,默认是vscode,如果要指定打开其他编辑器,需要另外配置
- 在根目录添加
.env.delelopment
文件,配置内容为:EDITOR=code
# .env.development # code -> vscode EDITOR=code
- 安装 launch-editor-middleware:
- 解决方法:
-
控制台Vue栏点击
open-in-editor
文件按钮,自动用编辑器打开对应文件,却无法成功,终端报错以下相关提示:Could not open ArticleAdd.vue in the editor. The editor process exited with an error: (code 1). 'code' 不是内部或外部命令,也不是可运行的程序或批处理文件。
To specify an editor, specify the EDITOR env variable or add "editor" field to your Vue project config. 系统找不到指定的路径。 Could not open ArticleAdd.vue in the editor.
- 参考文档“在编辑器中打开”按钮不起作用
- 解决方法:
const openInEditor = require('launch-editor-middleware'); module.exports = { devServer: { setup (app) { app.use('/__open-in-editor', openInEditor('code')) } } }