[go] 解决小项目中托管 vue 工程的路由问题

在开发原型时会做一些极小的项目，部署时甚至连 nginx 都不想用。一般会将前端打包结果直接放到后端工程中，用 http.FileServer 加个路由完事。比如对于以下工程：

.
├── dist
├── go.mod
└── main.go

就可以这样写:

func main() {
	http.Handle("/", http.FileServer(http.Dir("dist")))
	http.HandleFunc("/api/ping", func(w http.ResponseWriter, r *http.Request) {
		fmt.Fprint(w, "pong")
	})

	log.Println("Serve at http://127.0.0.1:9090")
	http.ListenAndServe("127.0.0.1:9090", nil)
}

在执行 go run . 运行工程后，访问 http://127.0.0.1:9090 就能访问到前端页面。

但这样运行的前端工程有个问题。由于 vue router 是用 js 模拟的路由，页面没有对应的 html 文件。所以在路由跳转后刷新页面就会 404。就像下面这样，点击页面内的链接能跳转到 http://127.0.0.1/b。但在 F5 刷新之后就会 404：

解决这个问题的思路也很简单：

不用担心：要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。漂亮依旧!

就像 vue router 在文档中说明的那样。因为 js 路由是在 index.html 内处理的，所以只需提供回退路由即可。用 go 的 http 路由处理的话也很简单，只要在 FileServer 外套一层，提前判断一下路由是否存在对应的文件。如果文件不存在就让 index.html 提供服务。就像下面这样：

type vue struct {
	h  http.Handler		// http.FileServer
	fs http.FileSystem	// http.Dir("dist")
}

func (v *vue) ServeHTTP(w http.ResponseWriter, r *http.Request) {
	if f, err := v.fs.Open(path.Clean(r.URL.Path)); err == nil {
		f.Close()
		v.h.ServeHTTP(w, r)
		return
	}

	// use index.html if file not exists
	f, err := v.fs.Open("index.html")
	if err != nil {
		msg, code := toHTTPError(err)
		http.Error(w, msg, code)
		return
	}
	defer f.Close()

	d, err := f.Stat()
	if err != nil {
		msg, code := toHTTPError(err)
		http.Error(w, msg, code)
		return
	}
	http.ServeContent(w, r, d.Name(), d.ModTime(), f)
}

这样，即使直接访问 http://127.0.0.1:9090/b 也不会 404。同时也保证了其他静态文件（如网站图标）能正常访问。

本篇博客中的前端工程、后端工程和路由库已经放到了笔者的 github 上。也可以直接执行 go run github.com/kvii/vue-handler-demo-go@latest在本地体验。