MacBook M1下Vue DevTools无法在PhpStorm打开组件求助

问题根源 #

报错核心是架构不匹配：Vue DevTools运行的进程（大概率是浏览器通过Rosetta以x86_64架构运行）尝试调用arm64版本的PhpStorm，或调用Intel版时仍存在架构冲突。

解决方案 #

1. 安装PhpStorm通用版本 #

卸载现有单一架构版本，从JetBrains官网下载**Universal（通用）**版本的PhpStorm安装包，它同时支持arm64和x86_64架构，能自动适配当前系统环境。

2. 配置正确的EDITOR环境变量 #

不要直接指向PhpStorm的.app文件或主程序，而是使用PhpStorm提供的命令行工具：

• 打开PhpStorm，进入「偏好设置」→「工具」→「命令行工具支持」，复制生成的phpstorm命令路径（通常是/usr/local/bin/phpstorm）。
• 在终端执行以下命令，将变量写入shell配置文件（以zsh为例，bash用户替换为~/.bash_profile）：

  echo 'export EDITOR="/usr/local/bin/phpstorm"' >> ~/.zshrc
  source ~/.zshrc
  

• 验证：执行echo $EDITOR确认路径正确，再执行phpstorm 你的Vue文件路径，确认能直接打开文件。

3. 确保浏览器以原生arm64架构运行 #

如果浏览器是通过Rosetta运行的x86_64版本，会导致Vue DevTools进程架构不兼容：

• 打开访达，找到浏览器（如Chrome、Edge）→ 右键选择「显示简介」→ 取消勾选「使用Rosetta打开」→ 重启浏览器。

4. 项目配置文件指定编辑器 #

如果环境变量设置无效，直接在Vue项目的vue.config.js（或vite.config.js，依项目构建工具而定）中添加编辑器配置：

module.exports = {
  // 其他配置
  editor: '/usr/local/bin/phpstorm'
}

内容的提问来源于stack exchange，提问作者Дмитрий