Vue Devtools

在编辑器中打开组件

选择组件后，您可以选择在代码编辑器中打开相应的源文件。

为了使此功能正常工作，您可能需要在项目中进行一些配置。

Vue CLI 3

Vue CLI 3 在运行 vue-cli-service serve 时默认支持此功能。

Nuxt & Quasar CLI

Nuxt & Quasar CLI 默认支持此功能。请确保处于调试模式。

Webpack

在您的 Vue 项目中，安装 launch-editor-middleware 包并修改您的 webpack 配置

  1. 导入包
var openInEditor = require('launch-editor-middleware')
  1. 在 devServer 选项中，注册 /__open-in-editor HTTP 路由
devServer: {
  before (app) {
    app.use('/__open-in-editor', openInEditor())
  }
}
  1. 将猜测要启动的编辑器。您也可以使用 editor 选项指定编辑器应用程序。请参阅 支持的编辑器列表。
openInEditor('code')
  1. 您现在可以在组件检查器窗格中点击组件名称（如果 devtools 知道其文件源，则会显示一个工具提示）。

Node.js

您可以使用 launch-editor 包来设置具有 /__open-in-editor 路径的 HTTP 路由。它将接收 file 作为 URL 变量。

自定义请求

您可以使用以下代码在您的前端应用程序中更改请求主机（默认值为 /）

if (process.env.NODE_ENV !== 'production')
  // App served from port 4000
  // Webpack dev server on port 9000
  window.VUE_DEVTOOLS_CONFIG = {
    openInEditorHost: 'https://127.0.0.1:9000/'
  }
}