本文详解如何将 Angular 2 构建的 ng2-admin 模板通过 Go 服务器静态托管，重点解决因直接运行开发源码导致的 webpack-dev-server.js 404 错误问题。核心在于：必须使用生产构建（build:prod）生成 dist/ 静态资源，而非直接托管 src/ 源码目录。
本文详解如何将 angular 2 构建的 ng2-admin 模板通过 go 服务器静态托管，重点解决因直接运行开发源码导致的 `webpack-dev-server.js` 404 错误问题。核心在于：必须使用生产构建（`build:prod`）生成 `dist/` 静态资源，而非直接托管 `src/` 源码目录。
ng2-admin 是一个基于 Angular 2+ 和 Bootstrap 的管理后台模板，其默认开发模式依赖 Webpack Dev Server 提供热更新与模块代理功能（如 /webpack-dev-server.js 即为其开发服务入口）。该脚本仅存在于开发环境，不会被打包进生产代码中——因此当你用 Go 直接托管 ./src/ 目录时，浏览器尝试加载此不存在的开发脚本，必然失败。
✅ 正确做法是：先构建生产版本，再由 Go 托管构建产物。
第一步：生成生产构建
确保你已成功克隆并安装 ng2-admin 依赖（npm install），然后执行官方推荐的构建命令：
npm run prebuild:prod && npm run build:prod
✅ 注意：部分新版 ng2-admin 分支可能改用 npm run build:prod 单命令（自动清理 dist），请以项目根目录下的 package.json 中定义的 script 为准。构建完成后，所有静态资源（HTML、JS、CSS、assets）将输出至 dist/ 目录。
第二步：调整 Go 服务器配置
将 http.FileServer 指向 dist/ 而非 src/，并确保路由能正确响应根路径和子资源：
package main
import (
"fmt"
"net/http"
"github.com/gorilla/mux"
)
func main() {
r := mux.NewRouter()
// 托管 dist/ 下全部静态资源（含 index.html）
fs := http.FileServer(http.Dir("./dist/"))
r.PathPrefix("/").Handler(http.StripPrefix("/", fs))
fmt.Printf("Starting production server on :33166\n")
http.ListenAndServe(":33166", r)
}
⚠️ 关键说明：
- 不再需要单独处理 /config/ 路径（除非你的 dist/ 中明确包含 config/ 子目录且需特殊权限）；
- http.StripPrefix("/", fs) 确保请求 /main.js 映射到 ./dist/main.js，而非 ./dist//main.js；
- 若 index.html 是唯一入口（SPA），Go 默认不会自动返回它；但 ng2-admin 的 dist/index.html 已内联所有资源，且其 base href="/" 配置与上述路由兼容，因此无需额外重定向中间件。
第三步：启动并验证
go run main.go
访问 http://127.0.0.1:33166 —— 页面应正常加载，开发者工具 Network 面板中不再出现 webpack-dev-server.js 等 404 请求，所有 JS/CSS 均来自 dist/ 下的 .js 和 .css 文件。
? 总结：
Angular 应用的「开发」与「部署」是两个完全分离的阶段。Go 作为纯静态文件服务器，只应服务 dist/ 构建产物；任何对 src/、node_modules/ 或 Webpack 开发中间件（如 webpack-dev-server.js）的依赖，都意味着尚未完成构建流程。牢记：ng serve ≠ 生产部署，npm run build:prod 才是上线前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
