本文属于个人在项目中完成的小优化点记录，其它小优化导航连接：关于个人在 Vue 项目上的一些小优化记录
Vue devtool 支持在浏览器控制台中快速打开组件在编辑器中对应的文件，在开发或查找问题的过程中出奇地方便，如下面的 1、2 步骤：
- 选中对应的组件
- 点击右上角的符号直接在编辑器中打开。
官方文档这里有说明：点击这里查看相关文档
支持的编辑器列表
下面先罗列一下支持程度
| Value | Editor | Linux | Windows | OSX |
|---|---|---|---|---|
appcode | AppCode | ✓ | ||
atom | Atom | ✓ | ✓ | ✓ |
atom-beta | Atom Beta | ✓ | ||
brackets | Brackets | ✓ | ✓ | ✓ |
clion | Clion | ✓ | ✓ | |
code | Visual Studio Code | ✓ | ✓ | ✓ |
code-insiders | Visual Studio Code Insiders | ✓ | ✓ | ✓ |
codium | VSCodium | ✓ | ✓ | ✓ |
emacs | Emacs | ✓ | ||
idea | IDEA | ✓ | ✓ | ✓ |
notepad++ | Notepad++ | ✓ | ||
pycharm | PyCharm | ✓ | ✓ | ✓ |
phpstorm | PhpStorm | ✓ | ✓ | ✓ |
rubymine | RubyMine | ✓ | ✓ | ✓ |
sublime | Sublime Text | ✓ | ✓ | ✓ |
vim | Vim | ✓ | ||
visualstudio | Visual Studio | ✓ | ||
webstorm | WebStorm | ✓ | ✓ | ✓ |
你也可以前往这里查看最新的支持情况：点击查看支持的编辑器
配置方式 1：通过环境变量配置
我们需要在 env 中指定 EDITOR 为我们的编辑器，例如 vscode 可以将 EDITOR 指定为 code。可以在 .env.development 中添加一行 EDITOR = code 或者在启动命令那里添加环境变量，推荐使用 cross-env 来添加。
配置方式 2：手动配置
下面介绍手动配置的情况如何处理：
这个功能需要用到 launch-editor-middleware 包，因此我们需要先安装它：npm i -D launch-editor-middleware
由于 vue-service 会在开发服务器中自动抢先注册一个路由 /__open-in-editor，但是它并没有传入对应的编辑器参数，会导致报错，我们必须抢在它前面注册，否则无法注册成功：
- 如果项目用的是 webpack4，则我们在
devServer中加上配置：setup: (app) => app.use('/__open-in-editor', require('launch-editor-middleware')('code'))，如有有问题可以参考这个 issue - 如果项目是 webpack5，则添加到
onBeforeSetupMiddleware中：onBeforeSetupMiddleware: (devServer) => devServer.app.use('/__open-in-editor', require('launch-editor-middleware')('code'))
特别说明：在 webpack5 中，使用 onBeforeSetupMiddleware 可能会看到如下提示：
大意是 onBeforeSetupMiddleware 已经被废弃，请使用 setupMiddlewares 来代替
但我们不得不用它，因为如果使用 setupMiddlewares，我们将无法抢先在 @vue/cli-service 前面注册该功能的路由，因为我们传入的参数被 @vue/cli-service 包装了一下，放在了它注册逻辑的后面:
我们可以看到，@vue/cli-service 在这里提前注册了 /__open-in-editor，然后才会执行我们的逻辑，导致我们无法注册成功。因此如果是手动配置的情况下，我们必须使用 devServer.onBeforeSetupMiddleware
