如何为双端口运行的Laravel Breeze(Inertia+Vue)配置ngrok？

一、修复YAML解析错误 #

你遇到的yaml: line 5: did not find expected key错误，核心原因是缩进格式不规范：

• YAML对缩进要求严格，必须使用空格（建议每个层级用2个空格），绝对不能混用Tab键和空格。
• 检查backend和frontend字段是否正确缩进在tunnels下方，确保层级结构清晰。

另外，ngrok v3配置中version: "3"属于非必填字段，移除后可避免潜在兼容问题。修正后的配置文件如下：

authtoken: 你的真实ngrok令牌 # 替换为ngrok官网获取的有效令牌
tunnels:
  backend:
    proto: http
    addr: 8000
  frontend:
    proto: http
    addr: 5173

二、免费版ngrok的多端口限制 #

注意：ngrok免费版不支持同时运行多个隧道，即使配置正确，执行ngrok start --all也会失败，只能单次启动一个隧道：

• 启动后端隧道：ngrok start backend
• 启动前端隧道：ngrok start frontend

三、双端口同时公网访问的解决方案 #

要实现前后端同时公网访问，推荐通过Vite代理合并端口，只需暴露一个端口即可：

1. 在Vue项目的vite.config.js中添加代理配置，将前端的后端请求转发到Laravel服务：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
      '/storage': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      }
    }
  }
})

2. 重启前端服务npm run dev，此时前端的所有后端请求会自动转发到localhost:8000。

3. 用ngrok暴露前端的5173端口：ngrok http 5173，公网访问ngrok生成的前端地址即可同时使用前后端功能。

内容的提问来源于stack exchange，提问作者Rizal Afrizal