必须在前端构建完成后手动触发go build，推荐用package.json脚本串行控制，并校验dist目录非空后再编译，goland中配置shell script运行配置实现一键执行。

前端打包完成如何触发 Go 编译？

GoLand 本身不监听文件变化或执行构建链路联动，所谓“自动编译”必须靠外部工具链衔接。核心思路是：让前端打包命令（如 npm run build）结束后，立刻调用 go build 或自定义脚本，而非依赖 IDE 的构建事件。

• 不要在 GoLand 的 “Build” 或 “Before launch” 里硬塞前端命令——它不支持跨语言依赖顺序，且无法感知 Webpack/Vite 打包是否真正完成（比如热更新中、source map 生成延迟）
• 推荐统一收口到 package.json 的 scripts 中，用 && 或 run-p（来自 npm-run-all）控制串行
• 若需更健壮的等待（例如等 dist/ 下文件写入完成），可加简单轮询脚本，避免 go build 读到空目录或半截文件

怎么写一个安全的打包+编译脚本？

直接拼接 npm run build && go build -o ./bin/app ./cmd/app 看似简单，但有隐患：前端构建失败时，&& 会跳过 Go 编译，这没问题；但若构建成功但输出目录异常（如权限不足、磁盘满），Go 编译仍会执行，可能打包出不含静态资源的二进制。

• 务必检查 dist/（或你配置的输出目录）是否存在且非空：

  if [ -d "dist" ] && [ -n "$(ls -A dist)" ]; then
    go build -o ./bin/app ./cmd/app
  else
    echo "❌ dist is missing or empty"; exit 1
  fi

• 把这段逻辑存为 scripts/build-go.sh（Linux/macOS）或 scripts/build-go.bat（Windows），并在 package.json 中调用："build:full": "npm run build && bash scripts/build-go.sh"
• Go 侧代码里读取静态资源时，建议用 embed.FS + io/fs.WalkDir 校验关键文件存在，而不是运行时 panic

GoLand 里怎么一键运行这个流程？

不是配“构建”，而是配“运行配置”——类型选 Shell Script，指向你的打包脚本即可。这样点击绿色三角就能跑完整流程，且支持调试参数、环境变量、工作目录。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 菜单栏 → Run → Edit Configurations… → + → Shell Script
• Script path 填 ./scripts/build-go.sh（确保有执行权限：chmod +x scripts/build-go.sh）
• Working directory 设为项目根目录（即含 package.json 和 go.mod 的目录）
• 勾选 Allow running in parallel 可禁用，防止多次点击导致并发冲突

为什么不能用 GoLand 的 File Watchers？

File Watchers 适合单文件变更响应（如 .go → go fmt），但前端打包是批量写入几十个文件的过程。Watchers 会为每个产出文件（.js、.css、.html）触发一次，极易重复编译、竞争写入，甚至因触发时机早于文件完全落盘而失败。

• 它监听的是文件系统事件，不是构建生命周期，无法区分“Webpack 启动中”、“编译中”、“已就绪”
• 即使加了 delay，也无法解决多文件原子性问题；而 npm run build 退出码才是唯一可信的完成信号
• 真要用自动化，优先考虑 make 或 just 这类任务编排工具，比 IDE 内置功能更可控

实际落地时，最易被忽略的是静态资源路径一致性：前端 build.outputDir、Go 里 embed 的路径、HTTP 服务 Serve 的路由前缀，三者必须对齐，否则打包看似成功，运行时 404。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！